fix(prodInfo): 添加表单项

src/avue/crud/prodList.js

@@ -2,9 +2,9 @@ import { row_currencyFormatter } from "@/utils/formatters"
 
 export const tableOption = {
   searchMenuSpan: 6,
-  columnBtn: false,
+  columnBtn: true,
   border: true,
-  selection: true,
+  selection: false,
   stripe: true,
   menuAlign: 'center',
   menuFixed: false,
@@ -24,7 +24,7 @@ export const tableOption = {
     label: "#",
     prop: "id",
   }, {
-    label: '产品名字',
+    label: '产品名',
     prop: 'name',
     search: true,
   }, {

src/avue/form/prodinfo.ts

@@ -1,3 +1,5 @@
+import Vue from "vue"
+
 const number_input_props = (message: string, precision: number = 0, nonzero: boolean = false) => {
   return {
     type: "number",
@@ -18,73 +20,116 @@ const number_input_props = (message: string, precision: number = 0, nonzero: boo
   }
 }
 
-export default {
-  column: [
-    {
-      label: '产品名称',
-      prop: 'name',
-      type: 'input',
-      span: 12,
-      row: true,
-      rules: [{
-        required: true,
-        message: "请输入产品名称",
-      }]
-    }, {
-      label: '产品描述',
-      prop: 'desc',
-      type: 'textarea',
-      minRows: 3,
-      maxRows: 5,
-      row: true,
-    }, {
-      label: "价格(￥)",
-      prop: "price",
-      ...number_input_props("请输入产品价格", 2, true),
+const radio_prop = (label: string, prop: string, options: string[]) => {
+  return {
+    label,
+    prop,
+    type: 'radio',
+    span: 12,
+    row: true,
+    dicData: options.map(v => {
+      return {
+        value: v,
+        label: v,
+      }
+    }),
+    rules: [{
+      required: true,
+      message: label + " 为必填项",
+      trigger: 'blur'
+    }]
+  }
+}
 
-    }, {
-      label: "运费(￥)",
-      ...number_input_props("请输入运费价格", 2),
-      prop: "deliverPrice",
-      row: true,
-    }, {
-      label: "库存(件)",
-      prop: "stockAmount",
-      ...number_input_props("请输入库存数"),
-      // }, {
-      //   label: "售出(件)",
-      //   prop: "soldAmount",
-      //   ...number_input_props("请输入售出量"),
-      row: true,
-    }, {
-      label: "商品类型",
-      prop: "kind",
-      span: 8,
-    }, {
-      label: "商品平台",
-      prop: "platform",
-      span: 8,
-      row: true,
-    }, {
-      label: "商品分类",
-      prop: "goodsTypeList",
-      formslot: true,
-      span: 24,
-      row: true,
-    }, {
-      label: '封面图片',
-      prop: 'cover',
-      type: 'upload',
-      listType: 'picture-card',
-      span: 24,
-      accept: 'image/png, image/jpeg',
-      limit: 1,
-      fileSize: 5 * 1024,
-      propsHttp: {
-        res: 'data'
+export default (parent: any) => {
+  return {
+    column: [
+      {
+        label: '产品名称',
+        prop: 'name',
+        type: 'input',
+        span: 12,
+        row: true,
+        rules: [{
+          required: true,
+          message: "请输入产品名称",
+        }]
+      }, {
+        label: '产品描述',
+        prop: 'desc',
+        type: 'textarea',
+        minRows: 3,
+        maxRows: 5,
+        row: true,
+      }, {
+        label: "价格(￥)",
+        prop: "price",
+        ...number_input_props("请输入产品价格", 2, true),
+
+      }, {
+        label: "运费(￥)",
+        ...number_input_props("请输入运费价格", 2),
+        prop: "deliverPrice",
+        row: true,
+      }, {
+        label: "库存(件)",
+        prop: "stockAmount",
+        ...number_input_props("请输入库存数"),
+        row: true,
       },
-      tip: '只能上传jpg/png图片，且不超过5MiB（暂时没用）',
-      action: ''
-    }
-  ]
+      radio_prop("展示平台", "platform", ["全部", "商城", "直播间"]),
+      radio_prop("商品类型", "kind", ["自营", "第三方链接"]),
+      {
+        label: '第三方链接',
+        prop: 'link',
+        span: 18,
+        row: true,
+        rules: [{
+          validator: (_: any, v: string, callback: Function) => {
+            console.log(this)
+            // @ts-ignore
+            const selected_kind = parent.form.kind
+            if (selected_kind === '第三方链接' && !v) { // 商品类型为第三方链接，且没有填写链接时验证不通过
+              callback(new Error("商品类型为“第三方链接”时此项必填"))
+            } else {
+              callback()
+            }
+          },
+          trigger: 'blur'
+        }]
+      }, {
+        label: '需要地址',
+        prop: 'needAddr',
+        type: 'switch',
+        dicData: [{
+          label: '否',
+          value: false
+        }, {
+          label: '是',
+          value: true
+        }],
+        value: true,
+      }, {
+        label: "商品分类",
+        prop: "goodsTypeList",
+        formslot: true,
+        span: 24,
+        row: true,
+      }, {
+        label: '封面图片',
+        prop: 'cover',
+        type: 'upload',
+        listType: 'picture-card',
+        span: 24,
+        accept: 'image/png, image/jpeg',
+        limit: 1,
+        fileSize: 5 * 1024,
+        propsHttp: {
+          res: 'data'
+        },
+        tip: '只能上传jpg/png图片，且不超过5MiB（暂时没用）',
+        action: ''
+      }
+    ]
+  }
 }

src/utils/httpx.ts

@@ -2,6 +2,7 @@ import axios, { AxiosInstance } from 'axios'
 import { Message } from 'element-ui'
 
 const BASEURL = process.env.VUE_APP_BASE_API || ""
+const DEBUG = process.env.NODE_ENV === "development"
 
 interface Utilities {
   makeurl(path: string, query?: Record<string, any>): string
@@ -30,7 +31,9 @@ export const httpx = Object.assign(httpx_request, httpx_utility)
 
 httpx.interceptors.response.use(
   (response) => {
-    console.log(response.status, response.data)
+    if (DEBUG) {
+      console.log(response.status, response.data)
+    }
     if (response.data.code >= 0) {
       response.statusText = response.data.msg;
       response.data = response.data.data;

src/views/modules/prod/prodInfo.vue

@@ -36,10 +36,12 @@ export default Vue.extend({
         cover: [] as string[],
         kind: "",
         platform: "",
+        link: "",
+        needAddr: true,
         goodsTypeList: [] as number[],
         adminId: null,
       },
-      option: formOption,
+      option: formOption(this),
       categories: [] as ICategory[],
       new: false,
       id: 0,
@@ -80,6 +82,8 @@ export default Vue.extend({
           platform: item.platform,
           cover: [item.cover],
           kind: item.kind,
+          link: item.link,
+          needAddr: item.needAddr,
           goodsTypeList: categories,
           adminId: item.adminId,
         }
@@ -109,12 +113,12 @@ export default Vue.extend({
       console.log(data)
 
       httpx.post(path, data).then((data) => {
-        // TODO: AddGood 返回新项目id
         this.$message({
           message: '操作成功',
           type: 'success',
           duration: 1500
         })
+        this.$router.back()
       })
       done()
     },

src/views/modules/prod/prodList.vue

@@ -1,36 +1,34 @@
 <template>
-  <avue-crud ref="crud" :page="page" :data="dataList" :table-loading="dataListLoading" :permission="permission"
-    :option="tableOption" @search-change="searchChange" @selection-change="selectionChange" @on-load="getDataList">
+  <avue-crud ref="crud" :page="page" :data="dataList" :table-loading="dataListLoading" :option="tableOption"
+    @search-change="searchChange" @on-load="getDataList">
     <template slot="menuLeft">
-      <el-button type="primary" icon="el-icon-plus" size="small" v-if="isAuth('shop:pickAddr:save')"
-        @click.stop="addOrUpdateHandle()">新增</el-button>
+      <el-button type="primary" icon="el-icon-plus" size="small" @click.stop="addOrUpdateHandle()">新增</el-button>
       <!--el-button type="danger" @click="deleteHandle()" size="small" v-if="isAuth('shop:pickAddr:delete')"
         :disabled="dataListSelections.length <= 0">批量删除</el-button-->
     </template>
 
-    <template slot-scope="scope" slot="menu">
-      <el-button type="primary" icon="el-icon-edit" size="small" v-if="isAuth('prod:prod:update')"
-        @click="addOrUpdateHandle(scope.row.prodId)">修改</el-button>
-      <el-button type="danger" icon="el-icon-delete" size="small" v-if="isAuth('prod:prod:delete')"
-        @click="deleteGood(scope.row.id)">删除</el-button>
+    <template slot-scope="{row,index}" slot="menu">
+      <el-button type="primary" icon="el-icon-edit" size="small" @click="addOrUpdateHandle(row.id)">修改</el-button>
+      <el-button type="danger" icon="el-icon-delete" size="small" @click="deleteGood(row.id)">删除</el-button>
     </template>
   </avue-crud>
 </template>
 
-<script>
+<script lang="ts">
+import Vue from 'vue'
 import { tableOption } from '@/avue/crud/prodList.js'
-import Axios from 'axios'
 import httpx from '@/utils/httpx'
+import { IPage } from '@/utils/vo'
 
-export default {
+export default Vue.extend({
   data() {
     return {
       dataForm: {
         prodName: ''
       },
-      permission: {
-        delBtn: this.isAuth('prod:prod:delete')
-      },
+      // permission: {
+      //   delBtn: this.isAuth('prod:prod:delete')
+      // },
       dataList: [],
       page: {
         total: 0, // 总页数
@@ -40,12 +38,14 @@ export default {
       dataListSelections: [],
       dataListLoading: false,
       tableOption: tableOption,
-      resourcesUrl: process.env.VUE_APP_RESOURCES_URL
+      resourcesUrl: process.env.VUE_APP_RESOURCES_URL,
+
+      row: { id: 0 }, // 为了让ts类型检查器不报错（好像不支持 slot-scope 属性）
     }
   },
   methods: {
     // 获取数据列表
-    getDataList(page, params, done) {
+    getDataList(page?: IPage, params?: { name: string }, done?: Function) {
       this.dataListLoading = true
       httpx.post(httpx.makeurl('/goods/queryGoodList'), {
         name: params?.name || "",
@@ -61,7 +61,8 @@ export default {
         }
       })
     },
-    deleteGood(id) {
+
+    deleteGood(id: number) {
       this.$confirm(`确定进行删除操作?`, '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
@@ -82,51 +83,25 @@ export default {
       })
     },
     // 新增 / 修改
-    addOrUpdateHandle(id) {
+    addOrUpdateHandle(id?: number) {
       this.$router.push({
-        path: '/prodInfo',
-        query: { prodId: id }
+        path: `/prod/product/${id ? id : "new"}`
       })
     },
-    // 删除和批量删除
-    // deleteHandle(id) {
-    // let prodIds = this.getSeleProdIds()
-    // if (id) {
-    //   prodIds.push(id)
-    // }
-    // this.$confirm(`确定进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
-    //   confirmButtonText: '确定',
-    //   cancelButtonText: '取消',
-    //   type: 'warning'
-    // }).then(() => {
-    //   this.$http({
-    //     url: this.$http.adornUrl(`/prod/prod`),
-    //     method: 'delete',
-    //     data: this.$http.adornData(prodIds, false)
-    //   }).then(({ data }) => {
-    //     this.getDataList(this.page)
-    //     this.$message({
-    //       message: '操作成功',
-    //       type: 'success',
-    //       duration: 1500
-    //     })
-    //   })
-    // })
-    // },
     // 条件查询
-    searchChange(params, done) {
+    searchChange(params: { name: string }, done: Function) {
       this.getDataList(this.page, params, done)
     },
     // 多选变化
-    selectionChange(val) {
-      this.dataListSelections = val
-    },
+    // selectionChange(val: any) {
+    //   this.dataListSelections = val
+    // },
     // 获取选中的商品Id列表
-    getSeleProdIds() {
-      return this.dataListSelections.map(item => {
-        return item.prodId
-      })
-    }
+    // getSeleProdIds() {
+    //   return this.dataListSelections.map(item => {
+    //     return item.prodId
+    //   })
+    // }
   }
-}
+})
 </script>