新增技能类型等

src/views/about.vue

@@ -1,25 +1,47 @@
 <template>
   <el-form>
     <el-form-item>
-      <el-button
+      <el-button @click="addProduct()" type="primary">新增</el-button>
-        @click="
-          dialogTableVisible = true;
-          createFrom.resetFields();
-        "
-        type="primary"
-        >新增</el-button
-      >
     </el-form-item>
   </el-form>
   <el-table :data="tableData" border style="width: 100%">
     <el-table-column prop="name" label="名称" width="180" />
+    <el-table-column prop="name" label="技能类型" width="180">
+      <template #default="scope">
+        <div>
+          {{ skillType(scope.row.skill_type) }}
+        </div>
+      </template>
+    </el-table-column>
     <el-table-column prop="price" label="价格" width="180">
       <template #default="scope">
-        <div>{{ scope.row.price/100 }}元</div>
+        <div>{{ scope.row.price / 100 }}元</div>
       </template>
     </el-table-column>
     <el-table-column prop="api_usage_limit" label="次数" />
-    <el-table-column prop="created_at" label="开通时间" />
+    <el-table-column prop="created_at" label="开通时间">
+      <template #default="scope">
+        <div>
+          {{ changTime(scope.row.created_at) }}
+        </div>
+      </template>
+    </el-table-column>
+    <el-table-column prop="cost_fee" label="成本">
+      <template #default="scope">
+        <div v-if="scope.row.cost_fee || scope.row.cost_fee === 0">
+          {{ scope.row.cost_fee }}元
+        </div>
+      </template>
+    </el-table-column>
+    <el-table-column
+      prop="deduction_count_per_success_call"
+      label="调用扣费次数"
+    />
+    <el-table-column prop="service_life_day" label="有效期">
+      <template #default="scope">
+        <div>{{ scope.row.service_life_day }}天</div>
+      </template>
+    </el-table-column>
     <el-table-column prop="description" label="备注" />
     <el-table-column label="操作">
       <template #default="scope">
@@ -36,7 +58,7 @@
   <el-dialog
     v-model="dialogTableVisible"
     :title="id ? '修改产品' : '新增产品'"
-    width="800"
+    width="600"
   >
     <el-form ref="createFrom" :model="createFormData" :rules="createFromRules">
       <el-form-item label="名称" prop="name">
@@ -45,7 +67,7 @@
       <el-form-item label="价格" prop="price">
         <el-input v-model="createFormData.price" placeholder="请输入价格" />
       </el-form-item>
-      <el-form-item label="图片"> </el-form-item>
+      <!-- <el-form-item label="图片"> </el-form-item> -->
       <el-form-item label="次数" prop="api_usage_limit">
         <el-input
           type="number"
@@ -53,6 +75,48 @@
           placeholder="请输入可使用次数"
         />
       </el-form-item>
+      <el-form-item
+        label="调用成功扣除次数"
+        prop="deduction_count_per_success_call"
+      >
+        <el-input
+          type="number"
+          v-model="createFormData.deduction_count_per_success_call"
+          placeholder="请输入调用成功后扣除的次数"
+        />
+      </el-form-item>
+      <el-form-item label="成本费用" prop="cost_fee">
+        <el-input
+          type="number"
+          v-model="createFormData.cost_fee"
+          placeholder="请输入成本费用"
+        >
+          <template #append>￥</template>
+        </el-input>
+      </el-form-item>
+      <el-form-item label="产品使用期限" prop="service_life_day">
+        <el-input
+          type="number"
+          v-model="createFormData.service_life_day"
+          placeholder="产品使用期限，为空为永久"
+        >
+          <template #append>
+            <div>天</div>
+          </template>
+        </el-input>
+      </el-form-item>
+      <el-form-item label="技能类型" prop="skill_type">
+        <el-select
+          :disabled="createFormData.id!=''"
+          v-model="createFormData.skill_type"
+          placeholder="请选择"
+          style="width: 100%"
+        >
+          <el-option label="所有" value="all" />
+          <el-option label="身份证识别" value="IdCardOcr" />
+          <el-option label="手写识别" value="HandwritingOcr" />
+        </el-select>
+      </el-form-item>
       <el-form-item label="备注" prop="description">
         <el-input
           v-model="createFormData.description"
@@ -74,7 +138,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, reactive, onMounted } from "vue";
+import { ref, reactive, onMounted, computed } from "vue";
 import type { ComponentSize, FormInstance, FormRules } from "element-plus";
 import { ElMessage } from "element-plus";
 import { getProduct, createProduct, updateProduct } from "@/utils/api.ts";
@@ -83,6 +147,40 @@ onMounted(() => {
   getList();
 });
 
+const changTime = computed(() => {
+  return (val) => {
+    if (val) {
+      let date = new Date(val);
+      let year = date.getFullYear();
+      let month = date.getMonth() + 1;
+      month = month < 10 ? "0" + month : month;
+      let day = date.getDate();
+      day = day < 10 ? "0" + day : day;
+      return `${year}-${month}-${day}`;
+    }
+  };
+});
+// 技能类型
+const skillType = computed(() => {
+  let text = "";
+  return (val) => {
+    switch (val) {
+      case "all":
+        text = "所有";
+        break;
+      case "IdCardOcr":
+        text = "身份证识别";
+        break;
+      case "HandwritingOcr":
+        text = "手写识别";
+        break;
+      default:
+        break;
+    }
+    return text;
+  };
+});
+
 interface RuleForm {
   id?: String;
   name: String; //产品名
@@ -94,7 +192,7 @@ interface RuleForm {
 
 const id = ref("");
 
-const createFrom = ref(); //新增或修改产品时的DOM
+let createFrom = ref(); //新增或修改产品时的DOM
 
 const dialogTableVisible = ref(false); //是否显示新增&修改弹框
 
@@ -105,11 +203,22 @@ const createFormData = reactive({
   description: "", //描述
   image_url: "", //图片链接
   api_usage_limit: "", //用户购买该产品后可以获得的API使用次数限制。
+  deduction_count_per_success_call: "", //调用成功一次,扣除的次数
+  cost_fee: "", //成本费用
+  skill_type: "", //技能类型
 });
 
 const createFromRules = reactive<FormRules<RuleForm>>({
   name: [{ required: true, message: "请输入产品名称", trigger: "blur" }],
   price: [{ required: true, message: "请输入产品价格", trigger: "blur" }],
+  deduction_count_per_success_call: [
+    { required: true, message: "请输入调用扣费次数", trigger: "blur" },
+  ],
+  cost_fee: [{ required: true, message: "请输入成本费用", trigger: "blur" }],
+  service_life_day: [
+    { required: true, message: "请输入产品使用期限", trigger: "blur" },
+  ],
+  skill_type: [{ required: true, message: "请选择技能类型", trigger: "blur" }],
   api_usage_limit: [
     { required: true, message: "请输入可使用次数", trigger: "blur" },
   ],
@@ -117,6 +226,20 @@ const createFromRules = reactive<FormRules<RuleForm>>({
 //列表数据
 const tableData = ref([]);
 
+const addProduct = () => {
+  createFormData.id = "";
+  createFormData.name = ""; //产品名
+  createFormData.price = ""; //价格
+  createFormData.description = ""; //描述
+  createFormData.image_url = ""; //图片链接
+  createFormData.api_usage_limit = ""; //用户购买该产品后可以获得的API使用次数限制。
+  createFormData.deduction_count_per_success_call = ""; //调用成功一次,扣除的次数
+  createFormData.cost_fee = ""; //成本费用
+  createFormData.skill_type = ""; //技能类型
+  createFormData.service_life_day = ""; //产品使用期限
+  dialogTableVisible.value = true;
+};
+
 /**
  * @titel 获取产品列表
  */
@@ -136,6 +259,11 @@ const editProduct = (row) => {
   createFormData.name = row.name;
   createFormData.price = row.price;
   createFormData.image_url = row.image_url;
+  createFormData.cost_fee = row.cost_fee;
+  createFormData.deduction_count_per_success_call =
+    row.deduction_count_per_success_call;
+  createFormData.service_life_day = row.service_life_day;
+  createFormData.skill_type = row.skill_type;
   dialogTableVisible.value = true;
 };
 /**
@@ -146,6 +274,12 @@ const submitForm = async (formEl: FormInstance | undefined) => {
   await formEl.validate(async (valid, fields) => {
     if (valid) {
       createFormData.price = Number(createFormData.price);
+      createFormData.cost_fee = Number(createFormData.cost_fee);
+      createFormData.deduction_count_per_success_call = Number(
+        createFormData.deduction_count_per_success_call
+      );
+      createFormData.service_life_day = Number(createFormData.service_life_day);
+      createFormData.skill_type = createFormData.skill_type;
       createFormData.api_usage_limit = Number(createFormData.api_usage_limit);
       // 修改
       if (createFormData.id) {