Kaynağa Gözat

通用产品管理

chenrui 3 yıl önce
ebeveyn
işleme
95d6ddc13d

+ 48 - 0
src/api/productUniversalCode.js

@@ -0,0 +1,48 @@
+import { axios } from '@/utils/request'
+
+//  通用产品 列表  有分页
+export const productUniversalCodeList = (params) => {
+  const url = `/productUniversalCode/query/${params.pageNo}/${params.pageSize}`
+  delete params.pageNo
+  delete params.pageSize
+  return axios({
+    url: url,
+    data: params,
+    method: 'post'
+  })
+}
+//  通用产品 删除
+export const productUniversalCodeDel = (params) => {
+  const url = `/productUniversalCode/delete/${params.id}`
+  return axios({
+    url: url,
+    method: 'get'
+  })
+}
+//  通用产品 保存
+export const productUniversalCodeSave = (params) => {
+  return axios({
+    url: '/productUniversalCode/save',
+    data: params,
+    method: 'post'
+  })
+}
+//  通用产品 详情
+export const productUniversalCodeDetail = (params) => {
+  const url = `/productUniversalCode/${params.id}`
+  return axios({
+    url: url,
+    method: 'get'
+  })
+}
+//  产品编码模糊搜索  有分页  产品编码
+export const productCodeQueryList = (params) => {
+  const url = `/productUniversalCode/productList/${params.pageNo}/${params.pageSize}`
+  delete params.pageNo
+  delete params.pageSize
+  return axios({
+    url: url,
+    data: params,
+    method: 'post'
+  })
+}

+ 25 - 25
src/config/router.config.js

@@ -280,32 +280,32 @@ export const asyncRouterMap = [
                 }
               }
             ]
+          },
+          {
+            path: '/productManagement/productUniversal',
+            redirect: '/productManagement/productUniversal/list',
+            name: 'productUniversal',
+            component: RouteView,
+            meta: {
+              title: '通用产品管理',
+              icon: 'deployment-unit',
+              permission: 'M_productUniversalList'
+            },
+            hideChildrenInMenu: true,
+            children: [
+              {
+                path: 'list',
+                name: 'productUniversalList',
+                component: () => import(/* webpackChunkName: "shop" */ '@/views/productManagement/productUniversal/list.vue'),
+                meta: {
+                  title: '通用产品列表',
+                  icon: 'deployment-unit',
+                  hidden: true,
+                  permission: 'M_productUniversalList'
+                }
+              }
+            ]
           }
-          // {
-          //   path: '/productManagement/productUniversal',
-          //   redirect: '/productManagement/productUniversal/list',
-          //   name: 'productUniversal',
-          //   component: RouteView,
-          //   meta: {
-          //     title: '通用产品管理',
-          //     icon: 'deployment-unit'
-          //     // permission: 'M_productUniversalList'
-          //   },
-          //   hideChildrenInMenu: true,
-          //   children: [
-          //     {
-          //       path: 'list',
-          //       name: 'productUniversalList',
-          //       component: () => import(/* webpackChunkName: "shop" */ '@/views/productManagement/productUniversal/list.vue'),
-          //       meta: {
-          //         title: '通用产品列表',
-          //         icon: 'deployment-unit',
-          //         hidden: true
-          //         // permission: 'M_productUniversalList'
-          //       }
-          //     }
-          //   ]
-          // }
           // 二期
           // {
           //   path: '/productManagement/purchaseBaseLimit',

+ 73 - 0
src/views/common/productCodeList.vue

@@ -0,0 +1,73 @@
+<template>
+  <a-select
+    show-search
+    label-in-value
+    :value="dealerName"
+    placeholder="请输入编码搜索"
+    style="width: 100%"
+    :filter-option="false"
+    :not-found-content="fetching ? undefined : null"
+    @search="fetchUser"
+    @change="handleChange"
+    allowClear
+  >
+    <a-spin v-if="fetching" slot="notFoundContent" size="small" />
+    <a-select-option v-for="item in data" :key="item.productSn" :value="item.productSn">
+      {{ item.code }}
+    </a-select-option>
+  </a-select>
+</template>
+<script>
+import debounce from 'lodash/debounce'
+import { productCodeQueryList } from '@/api/productUniversalCode'
+export default {
+  data () {
+    this.lastFetchId = 0
+    this.fetchUser = debounce(this.fetchUser, 800)
+    return {
+      data: [],
+      dealerName: undefined,
+      fetching: false
+    }
+  },
+  methods: {
+    fetchUser (dealerName) {
+      console.log('fetching user', dealerName)
+      if (dealerName == '') return
+      this.lastFetchId += 1
+      const fetchId = this.lastFetchId
+      this.data = []
+      this.fetching = true
+      productCodeQueryList({ 'productCode': dealerName, pageNo: 1, pageSize: 20 }).then(res => {
+        if (fetchId !== this.lastFetchId) {
+          return
+        }
+        this.data = res.data && res.data.list ? res.data.list : []
+        this.fetching = false
+      })
+    },
+    handleChange (value) {
+      if (value && value.key) {
+        const ind = this.data.findIndex(item => item.productSn == value.key)
+        value.row = ind != -1 ? this.data[ind] : undefined
+      }
+      Object.assign(this, {
+        dealerName: value,
+        data: [],
+        fetching: false
+      })
+      this.$emit('change', value || { key: undefined })
+    },
+    resetForm () {
+      this.dealerName = undefined
+    },
+    setData (value) {
+      Object.assign(this, {
+        dealerName: value,
+        data: [],
+        fetching: false
+      })
+    }
+  }
+}
+</script>

+ 1 - 1
src/views/productManagement/productLevel/list.vue

@@ -82,7 +82,7 @@
       </template>
       <!-- 操作 -->
       <template slot="action" slot-scope="text, record">
-        <a-button size="small" type="link" @click="handleEdit(record)" id="productLevelList-edit-btn">编辑</a-button>
+        <a-button size="small" type="link" class="button-info" @click="handleEdit(record)" id="productLevelList-edit-btn">编辑</a-button>
       </template>
     </s-table>
     <!-- 编辑价格 -->

+ 181 - 0
src/views/productManagement/productUniversal/editModal.vue

@@ -0,0 +1,181 @@
+<template>
+  <a-modal
+    centered
+    class="productUniversalEdit-modal"
+    :footer="null"
+    :maskClosable="false"
+    :title="modalTit"
+    v-model="isShow"
+    @cancle="isShow=false"
+    :width="800">
+    <div>
+      <a-spin :spinning="spinning" tip="Loading...">
+        <a-form-model
+          id="productUniversalEdit-form"
+          ref="ruleForm"
+          :model="form"
+          :rules="rules"
+          :label-col="formItemLayout.labelCol"
+          :wrapper-col="formItemLayout.wrapperCol"
+        >
+          <a-form-model-item label="产品编码" prop="productSn">
+            <productCodeList ref="productCodeList" @change="productCodeChange" />
+          </a-form-model-item>
+          <a-form-model-item label="产品名称">
+            {{ productName || '--' }}
+          </a-form-model-item>
+          <a-form-model-item label="通用产品编码" prop="productCommonSn">
+            <productCodeList ref="productUniversalCodeList" @change="productUniversalCodeChange" />
+          </a-form-model-item>
+          <a-form-model-item label="通用产品名称">
+            {{ productCommonName || '--' }}
+          </a-form-model-item>
+        </a-form-model>
+        <div class="btn-cont">
+          <a-button type="primary" id="productUniversalEdit-save" @click="handleSave">保存</a-button>
+          <a-button id="productUniversalEdit-cancel" @click="isShow = false" style="margin-left: 15px;">取消</a-button>
+        </div>
+      </a-spin>
+    </div>
+  </a-modal>
+</template>
+
+<script>
+import { VSelect } from '@/components'
+import productCodeList from '@/views/common/productCodeList.vue'
+import { productUniversalCodeSave, productUniversalCodeDetail } from '@/api/productUniversalCode'
+export default {
+  name: 'ProductLevelEditModal',
+  components: { VSelect, productCodeList },
+  props: {
+    openModal: { //  弹框显示状态
+      type: Boolean,
+      default: false
+    },
+    itemId: {
+      type: [Number, String],
+      default: ''
+    }
+  },
+  computed: {
+    modalTit () {
+      return (this.itemId ? '编辑' : '新增') + '通用产品'
+    }
+  },
+  data () {
+    return {
+      isShow: this.openModal, //  是否打开弹框
+      spinning: false,
+      formItemLayout: {
+        labelCol: { span: 4 },
+        wrapperCol: { span: 16 }
+      },
+      form: {
+        productCode: undefined,
+        productSn: undefined,
+        productCommonCode: undefined,
+        productCommonSn: undefined
+      },
+      rules: {
+        productSn: [
+          { required: true, message: '请选择产品编码', trigger: 'change' }
+        ],
+        productCommonSn: [
+          { required: true, message: '请选择通用产品编码', trigger: 'change' }
+        ]
+      },
+      productName: '',
+      productCommonName: ''
+    }
+  },
+  methods: {
+    productCodeChange (val) {
+      console.log(val)
+      this.form.productSn = val.key || undefined
+      this.form.productCode = val.row && val.row.code ? val.row.code : undefined
+      this.productName = val.row && val.row.name ? val.row.name : undefined
+    },
+    productUniversalCodeChange (val) {
+      console.log(val)
+      this.form.productCommonSn = val.key || undefined
+      this.form.productCommonCode = val.row && val.row.code ? val.row.code : undefined
+      this.productCommonName = val.row && val.row.name ? val.row.name : undefined
+    },
+    // 详情
+    getDetail () {
+      productUniversalCodeDetail({ id: this.itemId }).then(res => {
+        if (res.status == 200) {
+          this.form.productSn = res.data.productSn || undefined
+          this.form.productCode = res.data.productCode || undefined
+          this.form.productCommonSn = res.data.productCommonSn || undefined
+          this.form.productCommonCode = res.data.productCommonCode || undefined
+          this.productName = res.data.product.name || ''
+          this.productCommonName = res.data.productCommont.name || ''
+          this.$refs.productCodeList.setData({ key: this.form.productSn, label: this.form.productCode })
+          this.$refs.productUniversalCodeList.setData({ key: this.form.productCommonSn, label: this.form.productCommonCode })
+        }
+      })
+    },
+    // 保存
+    handleSave () {
+      const _this = this
+      this.$refs.ruleForm.validate(valid => {
+        if (valid) {
+          const params = JSON.parse(JSON.stringify(_this.form))
+          params.id = _this.itemId ? this.itemId : undefined
+          _this.spinning = true
+          productUniversalCodeSave(params).then(res => {
+            if (res.status == 200) {
+              _this.$message.success(res.message)
+              setTimeout(() => {
+                _this.$emit('ok')
+                _this.isShow = false
+                _this.spinning = false
+              }, 1000)
+            } else {
+              _this.spinning = false
+            }
+          })
+        } else {
+          console.log('error submit!!')
+          return false
+        }
+      })
+    }
+  },
+  watch: {
+    //  父页面传过来的弹框状态
+    openModal (newValue, oldValue) {
+      this.isShow = newValue
+    },
+    //  重定义的弹框状态
+    isShow (newValue, oldValue) {
+      if (!newValue) {
+        this.$emit('close')
+        this.$refs.ruleForm.resetFields()
+        this.productName = ''
+        this.productCommonName = ''
+        this.$refs.productCodeList.resetForm()
+        this.$refs.productUniversalCodeList.resetForm()
+      }
+    },
+    itemId (newValue, oldValue) {
+      if (this.isShow && newValue) {
+        this.getDetail()
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less">
+  .productUniversalEdit-modal{
+    .ant-modal-body {
+      padding: 40px 40px 24px;
+    }
+    .btn-cont {
+      text-align: center;
+      margin: 35px 0 30px;
+    }
+  }
+</style>

+ 194 - 0
src/views/productManagement/productUniversal/list.vue

@@ -0,0 +1,194 @@
+<template>
+  <a-card size="small" :bordered="false" class="productUniversalList-wrap">
+    <!-- 搜索条件 -->
+    <div class="table-page-search-wrapper">
+      <a-form layout="inline" @keyup.enter.native="$refs.table.refresh(true)">
+        <a-row :gutter="15">
+          <a-col :md="6" :sm="24">
+            <a-form-item label="产品编码">
+              <a-input id="productUniversalList-productCode" v-model.trim="queryParam.productCode" allowClear placeholder="请输入产品编码"/>
+            </a-form-item>
+          </a-col>
+          <a-col :md="6" :sm="24">
+            <a-form-item label="产品名称">
+              <a-input id="productUniversalList-productName" v-model.trim="queryParam.productName" allowClear placeholder="请输入产品名称"/>
+            </a-form-item>
+          </a-col>
+          <a-col :md="6" :sm="24">
+            <a-form-item label="产品状态">
+              <v-select code="PRODUCT_STATUS" id="productUniversalList-productState" v-model="queryParam.productState" allowClear placeholder="请选择产品状态"></v-select>
+            </a-form-item>
+          </a-col>
+          <template v-if="advanced">
+            <a-col :md="6" :sm="24">
+              <a-form-item label="通用产品编码">
+                <a-input id="productUniversalList-productCommonCode" v-model.trim="queryParam.productCommonCode" allowClear placeholder="请输入通用产品编码"/>
+              </a-form-item>
+            </a-col>
+            <a-col :md="6" :sm="24">
+              <a-form-item label="通用产品名称">
+                <a-input id="productUniversalList-productCommonName" v-model.trim="queryParam.productCommonName" allowClear placeholder="请输入通用产品名称"/>
+              </a-form-item>
+            </a-col>
+          </template>
+          <a-col :md="6" :sm="24">
+            <a-button style="margin-bottom: 18px;" type="primary" @click="$refs.table.refresh(true)" :disabled="disabled" id="productUniversalList-refresh">查询</a-button>
+            <a-button style="margin: 0 0 18px 8px" @click="resetSearchForm" :disabled="disabled" id="productUniversalList-reset">重置</a-button>
+            <a @click="advanced=!advanced" style="margin-left: 8px">
+              {{ advanced ? '收起' : '展开' }}
+              <a-icon :type="advanced ? 'up' : 'down'"/>
+            </a>
+          </a-col>
+        </a-row>
+      </a-form>
+    </div>
+    <!-- 操作按钮 -->
+    <div class="table-operator">
+      <a-button id="productUniversalList-add" type="primary" class="button-error" @click="handleEdit()">新增</a-button>
+    </div>
+    <!-- 列表 -->
+    <s-table
+      class="sTable"
+      ref="table"
+      size="default"
+      :rowKey="(record) => record.id"
+      :columns="columns"
+      :data="loadData"
+      :scroll="{ x: 1580 }"
+      bordered>
+      <!-- 产品分类 -->
+      <template slot="productType" slot-scope="text, record">
+        <span v-if="record.productCommont.productTypeName2 || record.productCommont.productTypeName3">{{ record.productCommont.productTypeName2 }} {{ record.productCommont.productTypeName3 ? '>' : '' }} {{ record.productCommont.productTypeName3 }}</span>
+        <span v-else>--</span>
+      </template>
+      <!-- 操作 -->
+      <template slot="action" slot-scope="text, record">
+        <a-button size="small" type="link" class="button-info" @click="handleEdit(record)" id="productUniversalList-edit-btn">编辑</a-button>
+        <a-button size="small" type="link" class="button-error" @click="handleDel(record)" id="productUniversalList-del-btn">删除</a-button>
+      </template>
+    </s-table>
+    <!-- 新增/编辑 -->
+    <product-universal-edit-modal :openModal="openModal" :itemId="itemId" @close="closeModal" @ok="$refs.table.refresh()" />
+  </a-card>
+</template>
+
+<script>
+import moment from 'moment'
+import { STable, VSelect } from '@/components'
+import productUniversalEditModal from './editModal.vue'
+import { productUniversalCodeList, productUniversalCodeDel } from '@/api/productUniversalCode'
+export default {
+  components: { STable, VSelect, productUniversalEditModal },
+  data () {
+    return {
+      advanced: false, // 高级搜索 展开/关闭
+      tableHeight: 0,
+      queryParam: { //  查询条件
+        productCode: '',
+        productName: '',
+        productState: undefined,
+        productCommonName: '',
+        productCommonCode: ''
+      },
+      productType: [],
+      disabled: false, //  查询、重置按钮是否可操作
+      exportLoading: false, // 导出loading
+      columns: [
+        { title: '序号', dataIndex: 'no', width: 80, align: 'center' },
+        { title: '产品编码', dataIndex: 'productCode', width: 220, align: 'center', customRender: function (text) { return text || '--' } },
+        { title: '产品名称', dataIndex: 'product.name', align: 'center', customRender: function (text) { return text || '--' }, ellipsis: true },
+        { title: '产品状态', dataIndex: 'product.stateDictValue', width: 140, align: 'center', customRender: function (text) { return text || '--' } },
+        { title: '通用产品编码', dataIndex: 'productCommonCode', width: 220, align: 'center', customRender: function (text) { return text || '--' } },
+        { title: '通用产品名称', dataIndex: 'productCommont.name', width: 200, align: 'center', customRender: function (text) { return text || '--' }, ellipsis: true },
+        { title: '通用产品分类', scopedSlots: { customRender: 'productType' }, width: 200, align: 'center' },
+        { title: '通用产品状态', dataIndex: 'productCommont.stateDictValue', width: 150, align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } },
+        { title: '操作', scopedSlots: { customRender: 'action' }, width: 150, align: 'center', fixed: 'right' }
+      ],
+      // 加载数据方法 必须为 Promise 对象
+      loadData: parameter => {
+        this.disabled = true
+        if (this.tableHeight == 0) {
+          this.tableHeight = window.innerHeight - 380
+        }
+        return productUniversalCodeList(Object.assign(parameter, this.queryParam)).then(res => {
+          const data = res.data
+          const no = (data.pageNo - 1) * data.pageSize
+          for (var i = 0; i < data.list.length; i++) {
+            data.list[i].no = no + i + 1
+          }
+          this.disabled = false
+          return data
+        })
+      },
+      openModal: false, //  编辑  弹框
+      itemId: '' //  当前id
+    }
+  },
+  methods: {
+    //  重置
+    resetSearchForm () {
+      this.queryParam.productCode = ''
+      this.queryParam.productName = ''
+      this.queryParam.productState = undefined
+      this.queryParam.productCommonName = ''
+      this.queryParam.productCommonCode = ''
+      this.$refs.table.refresh(true)
+    },
+    //  编辑
+    handleEdit (row) {
+      if (row) {
+        this.itemId = row.id
+      } else {
+        this.itemId = null
+      }
+      this.openModal = true
+    },
+    //  关闭弹框
+    closeModal () {
+      this.itemId = ''
+      this.openModal = false
+    },
+    // 删除
+    handleDel (row) {
+      const _this = this
+      this.$confirm({
+        title: '提示',
+        content: '确认要删除吗?',
+        centered: true,
+        onOk () {
+          productUniversalCodeDel({ id: row.id }).then(res => {
+            if (res.status == 200) {
+              _this.$message.success(res.message)
+              _this.$refs.table.refresh()
+            }
+          })
+        }
+      })
+    },
+    //  导出
+    handleExport () {
+      const params = this.queryParam
+      this.exportLoading = true
+      // customerBundleExportDelay(params).then(res => {
+      //   this.exportLoading = false
+      //   this.download(res)
+      // })
+    },
+    download (data) {
+      if (!data) { return }
+      const url = window.URL.createObjectURL(new Blob([data]))
+      const link = document.createElement('a')
+      link.style.display = 'none'
+      link.href = url
+      const a = moment().format('YYYYMMDDHHmmss')
+      const fname = '通用产品_' + a
+      link.setAttribute('download', fname + '.xlsx')
+      document.body.appendChild(link)
+      link.click()
+    }
+  },
+  beforeRouteEnter (to, from, next) {
+    next(vm => {})
+  }
+}
+</script>