基础维护静态页更新

src/api/product-material/material/index.js

@@ -3,7 +3,7 @@ import request from '@/router/axios'
 // 产品树形
 export function materialTree(data = {}) {
   return request({
-    url: '/api/basics/classify/tree',
+    url: '/api/victoriatourist/classify/tree',
     method: 'post',
     data: data,
   })
@@ -11,7 +11,7 @@ export function materialTree(data = {}) {
 // 添加分类
 export function materialClassifyAdd(data = {}) {
   return request({
-    url: '/api/basics/classify/add',
+    url: '/api/victoriatourist/classify/add',
     method: 'post',
     data: data,
   })
@@ -19,7 +19,7 @@ export function materialClassifyAdd(data = {}) {
 // 修改分类
 export function materialClassifyEdit(data = {}) {
   return request({
-    url: '/api/basics/classify/edit',
+    url: '/api/victoriatourist/classify/edit',
     method: 'post',
     data: data,
   })
@@ -27,7 +27,7 @@ export function materialClassifyEdit(data = {}) {
 // 删除分类
 export function materialClassifyDel(data = {}) {
   return request({
-    url: '/api/basics/classify/delete',
+    url: '/api/victoriatourist/classify/delete',
     method: 'post',
     data: data,
   })
@@ -37,7 +37,7 @@ export function materialClassifyDel(data = {}) {
 // 产品列表 
 export function materialList(data = {}) {
   return request({
-    url: '/api/basics/material/list',
+    url: '/api/victoriatourist/material/list',
     method: 'post',
     data: data,
   })
@@ -46,7 +46,7 @@ export function materialList(data = {}) {
 // 产品条数 
 export function materialCount(data = {}) {
   return request({
-    url: '/api/basics/material/page',
+    url: '/api/victoriatourist/material/page',
     method: 'post',
     data: data,
   })
@@ -56,7 +56,7 @@ export function materialCount(data = {}) {
 // 添加产品 
 export function materialAdd(data = {}) {
   return request({
-    url: '/api/basics/material/add',
+    url: '/api/victoriatourist/material/add',
     method: 'post',
     data: data,
   })
@@ -65,7 +65,7 @@ export function materialAdd(data = {}) {
 // 编辑产品 
 export function materialEdit(data = {}) {
   return request({
-    url: '/api/basics/material/edit',
+    url: '/api/victoriatourist/material/edit',
     method: 'post',
     data: data,
   })
@@ -74,7 +74,7 @@ export function materialEdit(data = {}) {
 // 删除产品 
 export function materialDel(data = {}) {
   return request({
-    url: '/api/basics/material/delete',
+    url: '/api/victoriatourist/material/delete',
     method: 'post',
     data: data,
   })

src/api/product-material/product/index.js

@@ -3,7 +3,7 @@ import request from '@/router/axios'
 // 产品树形
 export function productTree(data = {}) {
   return request({
-    url: '/api/basics/classify/tree',
+    url: '/api/victoriatourist/classify/tree',
     method: 'post',
     data: data,
   })
@@ -11,7 +11,7 @@ export function productTree(data = {}) {
 // 添加分类
 export function productClassifyAdd(data = {}) {
   return request({
-    url: '/api/basics/classify/add',
+    url: '/api/victoriatourist/classify/add',
     method: 'post',
     data: data,
   })
@@ -19,7 +19,7 @@ export function productClassifyAdd(data = {}) {
 // 修改分类
 export function productClassifyEdit(data = {}) {
   return request({
-    url: '/api/basics/classify/edit',
+    url: '/api/victoriatourist/classify/edit',
     method: 'post',
     data: data,
   })
@@ -27,7 +27,7 @@ export function productClassifyEdit(data = {}) {
 // 删除分类
 export function productClassifyDel(data = {}) {
   return request({
-    url: '/api/basics/classify/delete',
+    url: '/api/victoriatourist/classify/delete',
     method: 'post',
     data: data,
   })
@@ -37,7 +37,7 @@ export function productClassifyDel(data = {}) {
 // 产品列表 
 export function productList(data = {}) {
   return request({
-    url: '/api/basics/product/list',
+    url: '/api/victoriatourist/productInfo/page',
     method: 'post',
     data: data,
   })
@@ -46,7 +46,7 @@ export function productList(data = {}) {
 // 产品条数 
 export function productCount(data = {}) {
   return request({
-    url: '/api/basics/product/page',
+    url: '/api/victoriatourist/product/page',
     method: 'post',
     data: data,
   })
@@ -56,7 +56,7 @@ export function productCount(data = {}) {
 // 添加产品 
 export function productAdd(data = {}) {
   return request({
-    url: '/api/basics/product/add',
+    url: '/api/victoriatourist/productInfo/add',
     method: 'post',
     data: data,
   })
@@ -65,7 +65,7 @@ export function productAdd(data = {}) {
 // 编辑产品 
 export function productEdit(data = {}) {
   return request({
-    url: '/api/basics/product/edit',
+    url: '/api/victoriatourist/productInfo/edit',
     method: 'post',
     data: data,
   })
@@ -74,7 +74,7 @@ export function productEdit(data = {}) {
 // 删除产品 
 export function productDel(data = {}) {
   return request({
-    url: '/api/basics/product/delete',
+    url: '/api/victoriatourist/productInfo/delete',
     method: 'post',
     data: data,
   })

src/lang/zh.js

@@ -26,6 +26,8 @@ export default {
   pleaseInput: '请输入',
   all: "全部",
   seniorQuery: "高级检索",
+  reset: "重置",
+  select: "选择",
   wel: {
     info: '早安，Smallwei，Avuex一款超乎你想象的框架！',
     dept: '我是avue团队下的一个部门-哈皮部门-哈皮职位',
@@ -216,9 +218,10 @@ export default {
   },
   product_material: {
     product: {
+      product: "产品",
       treeModalAdd: '添加分类',
       treeModalEdit: '编辑分类',
-      treeName: "产品名称",
+      treeName: "分类名称",
       nameRules: "请输入产品名称",
       productAdd: '添加产品',
       productEdit: '编辑产品',
@@ -227,15 +230,34 @@ export default {
       productCode: "产品编码",
       productName: '产品名称',
       productUnit: "单位",
+      jdPurchasePrice: '京东供价',
+      sellingPrice: '标准售价',
+      purchasePrice: "标准采购价",
+      clearancePeriod: "库存清空期限",
+      combination: "是否组合",
+      yes: "是",
+      no: "否",
+      combinationDetails: "组合明细",
+      lifeCycleRules: "生命周期规则",
+      lifeCycle: "生命周期",
+      deptId: "部门",
+      newProductsExpectedSales: "新品期",
+      growUpExpectedSales: "成长期",
+      matureExpectedSales: "成熟期",
+
+      cycleSales: "当前周期销量",
       productDescription: "产品说明",
       description: "说明",
       productClassifyRules: "请选择产品分类",
       productTypeRules: '请选择产品类型',
       productCodeRules: "请输入产品编码",
       productNameRules: '请输入产品名称',
+      combinationRules: "请选择是否组合",
+
       productUnitRules: "请选择单位",
       finishedProduct: "成品",
-      partiallyPreparedProducts: "半成品"
+      partiallyPreparedProducts: "半成品",
+      all: "全部",
     },
     material: {
       treeModalAdd: '添加分类',
@@ -251,6 +273,8 @@ export default {
       materialUnit: "单位",
       materialDescription: "物料说明",
       description: "说明",
+      deptId: "管理部门",
+      deptIdRules: "请选择管理部门",
       materialClassifyRules: "请选择物料分类",
       materialTypeRules: '请选择物料类型',
       materialCodeRules: "请输入物料编码",
@@ -269,8 +293,10 @@ export default {
       spuDescription: "spu说明",
       spuAdd: 'spu添加',
       spuEdit: 'spu编辑',
-      spuNameRules: '请输入spu名称'
-
+      productCode: "产品编码",
+      productName: '产品名称',
+      spuNameRules: '请输入spu名称',
+      associatedProducts: '关联产品',
     },
     warehouse: {
       warehouseAdd: '添加仓库',
@@ -278,7 +304,11 @@ export default {
       warehouseType: "仓库类型",
       warehouseName: '仓库名称',
       warehouseDescription: "仓库说明",
-      storekeeper: '仓管员'
+      storekeeper: '仓管员',
+      warehouseTypeRules: "请选择仓库类型",
+      warehouseNameRules: '请输入仓库名称',
+
+      warehouseKeeperIdRules: "请选择仓管员",
     },
     supply: {
       supplyAdd: '添加供应商',
@@ -287,8 +317,12 @@ export default {
       supplyType: '供应商类型',
       supplyCode: "供应商编码",
       supplyName: '供应商名称',
-      city: '所在城市',
+      country: "国家",
+      province: "省/洲",
+      whereCity: "所在城市",
+      city: '城市',
       accountingPeriod: '账期',
+      contactInfo: "联系信息",
       contacts: '联系人',
       contactNumber: '联系电话',
       returnAndReplacementPeriod: '退换货期限',
@@ -301,6 +335,9 @@ export default {
       bankNo: '银行号',
       supplyTypeRules: '请选择供应商类型',
       supplyNameRules: '请输入供应商名称',
+      countryRules: '请选择国家',
+      provinceIdRules: '请选择省/洲',
+      cityRules: '请选择城市',
       contactsRules: '请输入联系人',
       contactNumberRules: '请输入联系电话',
       accountingPeriodRules: '请输入账期',
@@ -314,8 +351,8 @@ export default {
         goodCode: '物品编码',
         goodName: '物品名称',
         goodType: '物品类型',
-        supplyPrice: '供应单价',
-
+        price: '单价',
+        supplyPrice: "供应单价",
       },
 
 

src/router/page/index.js

@@ -194,7 +194,7 @@ export default [
     children: [
       {
         path: 'index',
-        name: 'spu管理',
+        name: 'spu维护',
         component: () => import(/* webpackChunkName: "page" */ '@/views/product-material/spu/index'),
         props: true,
       },

src/views/product-material/material/addMaterial.vue

@@ -0,0 +1,221 @@
+<template>
+  <div v-loading="loading">
+    <div class="form-box">
+      <el-form
+        label-position="top"
+        :model="form"
+        :rules="formRules"
+        ref="form"
+        label-width="100px"
+      >
+        <el-form-item
+          :label="$t('product_material.material.materialClassify')"
+          prop="classifyId"
+        >
+          <el-cascader
+            v-model="form.classifyId"
+            :emitPath="false"
+            style="width: 100%"
+            size="small"
+          ></el-cascader>
+        </el-form-item>
+        <el-row>
+          <el-col :span="6">
+            <el-form-item
+              :label="$t('product_material.material.materialType')"
+              prop="type"
+            >
+              <el-select
+                v-model="form.type"
+                :placeholder="$t('pleaseSelect')"
+                style="width: 100%"
+              >
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                >
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="10">
+          <el-col :span="6">
+            <el-form-item
+              :label="$t('product_material.material.materialCode')"
+              prop="code"
+            >
+              <el-input
+                v-model="form.code"
+                :placeholder="$t('pleaseInput')"
+              ></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="18">
+            <el-form-item label=".">
+              <span>不输入则自动生成，自动编码规则示例：M00001</span>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-form-item
+          :label="$t('product_material.material.materialName')"
+          prop="name"
+        >
+          <el-input
+            v-model="form.name"
+            :placeholder="$t('pleaseInput')"
+          ></el-input>
+        </el-form-item>
+        <el-row>
+          <el-col :span="6">
+            <el-form-item
+              :label="$t('product_material.material.materialUnit')"
+              prop="unit"
+            >
+              <el-select
+                v-model="form.unit"
+                :placeholder="$t('pleaseSelect')"
+                style="width: 100%"
+              >
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                >
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="6">
+            <el-form-item
+              :label="$t('product_material.material.deptId')"
+              prop="deptId"
+            >
+              <el-select
+                v-model="form.deptId"
+                :placeholder="$t('pleaseSelect')"
+                style="width: 100%"
+              >
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                >
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-form-item :label="$t('product_material.material.description')">
+          <el-input
+            v-model="form.introduce"
+            type="textarea"
+            :placeholder="$t('pleaseInput')"
+            :rows="4"
+          ></el-input>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div style="text-align: center; margin-top: 15px">
+      <el-button size="small" @click="handleCancel"
+        >{{ $t("cancel") }}
+      </el-button>
+      <el-button type="primary" size="small" @click="handleSubmit">
+        {{ $t("submit") }}</el-button
+      >
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "addMaterial",
+
+  props: {
+    form: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  data() {
+    return {
+      loading: false,
+      form: {
+        classifyId: "",
+        type: "",
+        code: "",
+        name: "",
+        unit: "",
+        introduce: "",
+        deptId: "",
+      },
+
+      formRules: {
+        classifyId: [
+          {
+            required: true,
+            message: this.$t("product_material.material.materialClassifyRules"),
+            trigger: "change",
+          },
+        ],
+        type: [
+          {
+            required: true,
+            message: this.$t("product_material.material.materialTypeRules"),
+            trigger: "change",
+          },
+        ],
+        deptId: [
+          {
+            required: true,
+            message: this.$t("product_material.material.deptIdRules"),
+            trigger: "change",
+          },
+        ],
+        unit: [
+          {
+            required: true,
+            message: this.$t("product_material.material.materialUnitRules"),
+            trigger: "change",
+          },
+        ],
+        name: [
+          {
+            required: true,
+            message: this.$t("product_material.material.materialNameRules"),
+            trigger: "blur",
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    handleSubmit() {
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          this.loading = true;
+          this.$emit("submit");
+        }
+      });
+    },
+    handleCancel() {
+      this.$emit("cancel");
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.form-box {
+  height: calc(100vh - 280px);
+  overflow: auto;
+  box-sizing: border-box;
+  padding: 5px;
+}
+</style>

src/views/product-material/material/index.vue

@@ -11,17 +11,62 @@
           }}</el-button>
         </el-card>
         <el-card class="bottom">
-          <by-table
-            v-loading="loading"
-            :data="tableList"
-            :columns="columns"
-            :pageNum.sync="req.pageNum"
-            :pageSize.sync="req.pageSize"
+          <query
             :selectConfig="selectConfig"
             :req="req"
-            :total="total"
-          >
-          </by-table>
+            :isShowMore="true"
+            @handleQuery="handleQuery"
+            @handleMore="
+              () => {
+                queryDialog = true;
+              }
+            "
+          ></query>
+          <el-table :data="tableList" v-loading="loading">
+            <el-table-column
+              :label="$t('product_material.material.materialType')"
+              align="center"
+            />
+            <el-table-column
+              :label="$t('product_material.material.materialCode')"
+              align="center"
+            />
+            <el-table-column
+              :label="$t('product_material.material.materialName')"
+              align="center"
+              prop="materialName"
+            />
+            <el-table-column
+              :label="$t('product_material.material.materialUnit')"
+              align="center"
+              prop="materialUnit"
+            />
+            <el-table-column
+              :label="$t('product_material.material.deptId')"
+              align="center"
+              prop="deptId"
+            />
+            <el-table-column
+              :label="$t('product_material.material.description')"
+              align="center"
+              prop="description"
+            />
+
+            <el-table-column
+              :label="$t('operation')"
+              align="center"
+              width="120"
+            >
+              <template slot-scope="scope">
+                <el-button type="text" @click="handleEdit(scope.row)"
+                  >{{ $t("edit") }}
+                </el-button>
+                <el-button type="text" @click="handleDelete(scope.row)"
+                  >{{ $t("delete") }}
+                </el-button>
+              </template>
+            </el-table-column>
+          </el-table>
           <el-dialog
             :title="
               titleText === 'add'
@@ -31,16 +76,99 @@
             :visible.sync="open"
             v-if="open"
             width="50%"
+            top="60px"
           >
-            <test
-              ref="form"
-              v-model="dialogParams"
-              :form-config="dialogForm"
-              :insideRules="dialogRules"
-            ></test>
+            <add-material
+              :form="form"
+              @submit="handleSubmit"
+              @cancel="handleCancel"
+              ref="addMaterial"
+            ></add-material>
+          </el-dialog>
+          <el-dialog
+            :title="$t('seniorQuery')"
+            v-if="queryDialog"
+            :visible.sync="queryDialog"
+            width="50%"
+            top="60px"
+          >
+            <div class="search-box">
+              <el-form :form="req" label-position="top" label-width="100px">
+                <el-row>
+                  <el-col :span="6">
+                    <el-form-item
+                      :label="$t('product_material.material.materialType')"
+                    >
+                      <el-select
+                        v-model="req.type"
+                        :placeholder="$t('pleaseSelect')"
+                        style="width: 100%"
+                      >
+                        <el-option
+                          v-for="item in options"
+                          :key="item.value"
+                          :label="item.label"
+                          :value="item.value"
+                        >
+                        </el-option>
+                      </el-select>
+                    </el-form-item>
+                  </el-col>
+                </el-row>
+
+                <el-row>
+                  <el-col :span="6">
+                    <el-form-item
+                      :label="$t('product_material.material.deptId')"
+                    >
+                      <el-select
+                        v-model="req.deptId"
+                        :placeholder="$t('pleaseSelect')"
+                        style="width: 100%"
+                      >
+                        <el-option
+                          v-for="item in options"
+                          :key="item.value"
+                          :label="item.label"
+                          :value="item.value"
+                        >
+                        </el-option>
+                      </el-select>
+                    </el-form-item>
+                  </el-col>
+                </el-row>
+
+                <el-row>
+                  <el-col :span="6">
+                    <el-form-item
+                      :label="$t('product_material.material.materialCode')"
+                    >
+                      <el-input
+                        v-model="req.code"
+                        :placeholder="$t('pleaseInput')"
+                      ></el-input>
+                    </el-form-item>
+                  </el-col>
+                </el-row>
+                <el-form-item
+                  :label="$t('product_material.material.materialName')"
+                >
+                  <el-input
+                    v-model="req.name"
+                    :placeholder="$t('pleaseInput')"
+                  ></el-input>
+                </el-form-item>
+              </el-form>
+            </div>
+            <div style="text-align: center; margin-top: 15px">
+              <el-button size="small" @click="handleReset"
+                >{{ $t("reset") }}
+              </el-button>
+              <el-button type="primary" size="small" @click="handleQuery">
+                {{ $t("submit") }}</el-button
+              >
+            </div>
           </el-dialog>
-          <!-- <el-dialog title="预览" :visible.sync="viewModal" width="500px">
-          </el-dialog> -->
         </el-card>
       </el-col>
     </el-row>
@@ -51,15 +179,19 @@
 import tree from "./tree.vue";
 import byTable from "@/components/by-table/index.js";
 import test from "@/components/form-test/index.vue";
+import query from "@/components/query/index.vue";
+import addMaterial from "./addMaterial.vue";
 
 import * as API from "@/api/product-material/material/index.js";
 
 export default {
-  name: "product",
+  name: "material",
   components: {
     tree,
     byTable,
     test,
+    query,
+    addMaterial,
   },
   data() {
     return {
@@ -72,7 +204,6 @@ export default {
       tableList: [],
       total: 0,
       loading: false,
-      open: false,
       selectConfig: [
         {
           label: this.$t("product_material.material.materialType"),
@@ -86,221 +217,19 @@ export default {
           ],
         },
       ],
-      columns: [
-        {
-          label: this.$t("product_material.material.materialType"),
-          prop: "type",
-          render: (h, params) => {
-            const item = this.dialogForm.type.data.find(
-              (item) => item.keyName === params.type
-            );
-            return <div>{item.labelName}</div>;
-          },
-        },
-        {
-          label: this.$t("product_material.material.materialCode"),
-          prop: "code",
-        },
-        {
-          label: this.$t("product_material.material.materialName"),
-          prop: "name",
-        },
-        {
-          label: this.$t("product_material.material.materialUnit"),
-          prop: "unit",
-        },
-        {
-          label: this.$t("product_material.material.description"),
-          prop: "introduce",
-        },
-        {
-          label: this.$t("operation"),
-          align: "center",
-          actions: [
-            {
-              text: this.$t("edit"),
-              type: "text",
-              style: {
-                color: "red",
-              },
-              fn: ({ row }) => {
-                this.handleEdit(row);
-              },
-            },
-            {
-              text: this.$t("delete"),
-              type: "text",
-              // disabled: true,
-              style: {
-                color: "red",
-              },
-              fn: ({ row }) => {
-                this.handleDelete(row);
-              },
-            },
-          ],
-        },
-      ],
-      dialogParams: {
+      open: false,
+      titleText: "",
+
+      form: {
         classifyId: "",
         type: "",
         code: "",
         name: "",
         unit: "",
         introduce: "",
+        deptId: "",
       },
-      dialogForm: {
-        loadingStatus: false,
-        classifyId: {
-          label: this.$t("product_material.material.materialClassify"),
-          type: "cascader",
-          props: {
-            label: "label",
-            value: "id",
-          },
-          width: "100%",
-          data: [],
-        },
-        type: {
-          label: this.$t("product_material.material.materialType"),
-          type: "select",
-          span: 3,
-          labelName: "labelName",
-          keyName: "keyName",
-          data: [
-            {
-              labelName: this.$t("product_material.material.rawMaterial"),
-              keyName: 1,
-            },
-            {
-              labelName: this.$t(
-                "product_material.material.subsidiaryMaterial"
-              ),
-              keyName: 2,
-            },
-            {
-              labelName: this.$t("product_material.material.parts"),
-              keyName: 3,
-            },
-            {
-              labelName: this.$t(
-                "product_material.material.packagingMaterials"
-              ),
-              keyName: 4,
-            },
-            {
-              labelName: this.$t("product_material.material.other"),
-              keyName: 5,
-            },
-          ],
-        },
-        code: {
-          span: 3,
-          label: this.$t("product_material.material.materialCode"),
-          type: "input",
-        },
-        name: {
-          label: this.$t("product_material.material.materialName"),
-          type: "input",
-        },
-        // unit: {
-        //   label: this.$t("product_material.material.materialUnit"),
-        //   type: "select",
-        //   span: 3,
-        //   labelName: "labelName",
-        //   keyName: "keyName",
-        //   data: [
-        //     { labelName: "半成品", keyName: 0 },
-        //     { labelName: "成品", keyName: 1 },
-        //   ],
-        // },
-        introduce: {
-          label: this.$t("product_material.material.materialDescription"),
-          type: "input",
-          itemType: "textarea",
-        },
-        // fileInfoList: {
-        //   label: this.$t("分组名称"),
-        //   type: "uploads",
-        //   data: [],
-        //   tip: "最多选择6个视频文件",
-        //   accept: ".avi,.wmv,.mkv,.mp4,.mov",
-        //   fileList: [],
-        // },
-        // videoClassifyId: {
-        //   label: this.$t("分组名称"),
-        //   type: "cascader",
-        //   props: {
-        //     label: "name",
-        //     value: "id",
-        //   },
-        //   data: [],
-        // },
-        // richText: {
-        //   label: this.$t("图文说明书"),
-        //   type: "editor",
-        // },
-
-        otherButton: {
-          align: "center",
-          list: [
-            {
-              name: this.$t("cancelText"),
-              methodsText: "cancel",
-              cancel: () => {
-                this.$refs.form.reset();
-                this.open = false;
-              },
-            },
-            {
-              name: this.$t("submitText"),
-              methodsText: "submit",
-              type: "primary",
-              submit: () => {
-                console.log(this.dialogParams);
-                this.handleSubmit();
-              },
-            },
-          ],
-        },
-      },
-      dialogRules: {
-        classifyId: [
-          {
-            required: true,
-            message: this.$t("product_material.material.materialClassifyRules"),
-            trigger: "change",
-          },
-        ],
-        type: [
-          {
-            required: true,
-            message: this.$t("product_material.material.materialTypeRules"),
-            trigger: "change",
-          },
-        ],
-        code: [
-          {
-            required: true,
-            message: this.$t("product_material.material.materialCodeRules"),
-            trigger: "blur",
-          },
-        ],
-        name: [
-          {
-            required: true,
-            message: this.$t("product_material.material.materialNameRules"),
-            trigger: "blur",
-          },
-        ],
-        unit: [
-          {
-            required: true,
-            message: this.$t("product_material.material.materialUnitRules"),
-            trigger: "change",
-          },
-        ],
-      },
+      queryDialog: false,
     };
   },
   created() {
@@ -320,6 +249,19 @@ export default {
     this.getList();
   },
   methods: {
+    handleReset() {
+      this.req = {
+        pageNum: 1,
+        pageSize: 10,
+        keyword: "",
+        classifyId: "",
+        deptId: "",
+      };
+    },
+    handleQuery() {
+      console.log(this.req, "sss");
+      this.getList();
+    },
     getList() {
       this.loading = true;
       API.materialList(this.req).then(
@@ -371,47 +313,58 @@ export default {
       this.req.classifyId = row.id;
       this.getList();
     },
+    handleCancel() {
+      this.form = {
+        classifyId: "",
+        type: "",
+        code: "",
+        name: "",
+        unit: "",
+        introduce: "",
+        deptId: "",
+      };
+      this.open = false;
+    },
     handleSubmit() {
-      this.$refs.form.$refs["form"].validate((valid) => {
-        if (valid) {
-          this.dialogForm.loadingStatus = true;
-          if (!this.dialogParams.id) {
-            API.materialAdd(this.dialogParams).then(
-              () => {
-                this.msgSuccess(this.$t("addSuccess"));
-                this.$refs.form.reset();
-                this.open = false;
-                this.dialogForm.loadingStatus = false;
-                this.getList();
-              },
-              (err) => {
-                console.log("materialAdd: " + err);
-                this.dialogForm.loadingStatus = false;
-              }
-            );
-          } else {
-            API.materialEdit(this.dialogParams).then(
-              () => {
-                this.msgSuccess(this.$t("editSuccess"));
-                this.$refs.form.reset();
-                this.open = false;
-                this.dialogForm.loadingStatus = false;
-                this.getList();
-              },
-              (err) => {
-                console.log("materialEdit: " + err);
-                this.dialogForm.loadingStatus = false;
-              }
-            );
+      if (this.form.id) {
+        API.materialAdd(this.form).then(
+          () => {
+            this.msgSuccess(this.$t("addSuccess"));
+            this.$refs.addProduct.loading = false;
+            this.open = false;
+            this.getList();
+          },
+          (err) => {
+            console.log("materialAdd: " + err);
+            this.$refs.addProduct.loading = false;
           }
-        }
-      });
+        );
+      } else {
+        API.materialEdit(this.form).then(
+          () => {
+            this.msgSuccess(this.$t("editSuccess"));
+            this.open = false;
+            this.$refs.addProduct.loading = false;
+            this.getList();
+          },
+          (err) => {
+            console.log("materialEdit: " + err);
+            this.$refs.addProduct.loading = false;
+          }
+        );
+      }
     },
   },
 };
 </script>
 
 <style lang="scss" scoped>
+.search-box {
+  height: calc(100vh - 280px);
+  overflow: auto;
+  box-sizing: border-box;
+  padding: 10px;
+}
 .right {
   height: calc(100vh - 110px);
   overflow-y: auto;

src/views/product-material/material/tree.vue

@@ -4,10 +4,13 @@
       <div class="bk"></div>
       <div>{{ $t("product_material.material.materialClassify") }}</div>
     </div>
-    <div class="search">
+    <el-row class="search" style="display: flex; align-items: center">
       <el-input :placeholder="$t('search')" v-model="filterText" size="small">
       </el-input>
-    </div>
+      <div style="width: 100px; margin-left: 10px">
+        <el-button size="mini"> 新增</el-button>
+      </div>
+    </el-row>
     <el-tree
       ref="tree"
       :data="treeData"

src/views/product-material/product/addProduct.vue

@@ -0,0 +1,349 @@
+<template>
+  <div v-loading="loading">
+    <div class="form-box">
+      <el-form
+        label-position="top"
+        :model="form"
+        :rules="formRules"
+        ref="form"
+        label-width="100px"
+      >
+        <el-form-item
+          :label="$t('product_material.product.productClassify')"
+          prop="classifyId"
+        >
+          <el-cascader
+            v-model="form.classifyId"
+            :emitPath="false"
+            style="width: 100%"
+            size="small"
+          ></el-cascader>
+        </el-form-item>
+        <el-form-item
+          :label="$t('product_material.product.productType')"
+          prop="type"
+        >
+          <el-radio-group v-model="form.type">
+            <el-radio-button
+              :label="$t('product_material.product.finishedProduct')"
+              name="1"
+            ></el-radio-button>
+            <el-radio-button
+              :label="$t('product_material.product.partiallyPreparedProducts')"
+            >
+            </el-radio-button>
+          </el-radio-group>
+        </el-form-item>
+        <el-row :gutter="10">
+          <el-col :span="6">
+            <el-form-item
+              :label="$t('product_material.product.productCode')"
+              prop="code"
+            >
+              <el-input
+                v-model="form.code"
+                :placeholder="$t('pleaseInput')"
+              ></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="18">
+            <el-form-item label=".">
+              <span>不输入则自动生成，自动编码规则示例：P00001</span>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-form-item
+          :label="$t('product_material.product.productName')"
+          prop="name"
+        >
+          <el-input
+            v-model="form.name"
+            :placeholder="$t('pleaseInput')"
+          ></el-input>
+        </el-form-item>
+        <el-row>
+          <el-col :span="6">
+            <el-form-item
+              :label="$t('product_material.product.productUnit')"
+              prop="unit"
+            >
+              <el-select
+                v-model="form.unit"
+                :placeholder="$t('pleaseSelect')"
+                style="width: 100%"
+              >
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                >
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="10">
+          <el-col :span="6">
+            <el-form-item
+              :label="$t('product_material.product.jdPurchasePrice')"
+              prop="jdPurchasePrice"
+            >
+              <el-input
+                v-model="form.jdPurchasePrice"
+                :placeholder="$t('pleaseInput')"
+              ></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item
+              :label="$t('product_material.product.sellingPrice')"
+              prop="sellingPrice"
+            >
+              <el-input
+                v-model="form.sellingPrice"
+                :placeholder="$t('pleaseInput')"
+              ></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="10">
+          <el-col :span="6">
+            <el-form-item
+              :label="$t('product_material.product.purchasePrice')"
+              prop="purchasePrice"
+            >
+              <el-input
+                v-model="form.purchasePrice"
+                :placeholder="$t('pleaseInput')"
+              ></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="10">
+          <el-col :span="6">
+            <el-form-item
+              :label="$t('product_material.product.clearancePeriod')"
+              prop="clearancePeriod"
+            >
+              <el-date-picker
+                v-model="form.clearancePeriod"
+                type="date"
+                placeholder="选择日期"
+              >
+              </el-date-picker>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-form-item
+          :label="$t('product_material.product.combination')"
+          prop="combination"
+        >
+          <el-radio-group v-model="form.combination">
+            <el-radio-button
+              :label="$t('product_material.product.yes')"
+              name="1"
+            ></el-radio-button>
+            <el-radio-button
+              :label="$t('product_material.product.no')"
+              name="0"
+            ></el-radio-button>
+          </el-radio-group>
+        </el-form-item>
+        <div style="margin-bottom: 20px">
+          <labelTitle
+            :content="$t('product_material.product.combinationDetails')"
+          ></labelTitle>
+        </div>
+        <el-form-item label-width="0px">
+          <el-button> {{ $t("select") }}</el-button>
+        </el-form-item>
+        <el-form-item>
+          <el-table :data="form.productCombinationList">
+            <el-table-column
+              :label="$t('product_material.product.productCode')"
+              prop="productCode"
+            >
+            </el-table-column>
+            <el-table-column
+              :label="$t('product_material.product.productName')"
+              prop="productName"
+            >
+            </el-table-column>
+            <el-table-column
+              :label="$t('operation')"
+              width="100"
+              align="center"
+            >
+              <template slot-scope="scope">
+                <el-button type="text">{{ $t("delete") }}</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-form-item>
+        <div style="margin-bottom: 20px">
+          <labelTitle
+            :content="$t('product_material.product.lifeCycleRules')"
+          ></labelTitle>
+        </div>
+        <el-row>
+          <el-form-item
+            :label="$t('product_material.product.newProductsExpectedSales')"
+            prop="newProductsExpectedSales"
+          >
+            <el-col :span="3"> 0 ~ 60 ： </el-col>
+            <el-col :span="6">
+              <el-input
+                v-model="form.newProductsExpectedSales"
+                :placeholder="$t('pleaseInput')"
+              ></el-input>
+            </el-col>
+          </el-form-item>
+        </el-row>
+        <el-row>
+          <el-form-item
+            :label="$t('product_material.product.growUpExpectedSales')"
+            prop="growUpExpectedSales"
+          >
+            <el-col :span="3"> 0 ~ 120 ： </el-col>
+            <el-col :span="6">
+              <el-input
+                v-model="form.growUpExpectedSales"
+                :placeholder="$t('pleaseInput')"
+              ></el-input>
+            </el-col>
+          </el-form-item>
+        </el-row>
+        <el-row>
+          <el-form-item
+            :label="$t('product_material.product.matureExpectedSales')"
+            prop="matureExpectedSales"
+          >
+            <el-col :span="3"> 大于120天 ： </el-col>
+            <el-col :span="6">
+              <el-input
+                v-model="form.matureExpectedSales"
+                :placeholder="$t('pleaseInput')"
+              ></el-input>
+            </el-col>
+          </el-form-item>
+        </el-row>
+      </el-form>
+    </div>
+    <div style="text-align: center; margin-top: 15px">
+      <el-button size="small" @click="handleCancel"
+        >{{ $t("cancel") }}
+      </el-button>
+      <el-button type="primary" size="small" @click="handleSubmit">
+        {{ $t("submit") }}</el-button
+      >
+    </div>
+  </div>
+</template>
+
+<script>
+import labelTitle from "@/components/label-title/index.vue";
+export default {
+  name: "addProduct",
+  components: {
+    labelTitle,
+  },
+  props: {
+    form: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  data() {
+    return {
+      loading: false,
+      form: {
+        classifyId: "",
+        deptId: "",
+        type: "",
+        code: "",
+        name: "",
+        unit: "",
+        combination: "",
+        purchasePrice: "",
+        sellingPrice: "",
+        jdPurchasePrice: "",
+        newProductsDay: "",
+        growUpDay: "",
+        newProductsExpectedSales: "",
+        growUpExpectedSales: "",
+        matureExpectedSales: "",
+        clearancePeriod: "",
+        productCombinationList: [],
+      },
+
+      formRules: {
+        classifyId: [
+          {
+            required: true,
+            message: this.$t("product_material.product.productClassifyRules"),
+            trigger: "change",
+          },
+        ],
+        type: [
+          {
+            required: true,
+            message: this.$t("product_material.product.productTypeRules"),
+            trigger: "change",
+          },
+        ],
+        // code: [
+        //   {
+        //     required: true,
+        //     message: this.$t("product_material.product.productCodeRules"),
+        //     trigger: "blur",
+        //   },
+        // ],
+        unit: [
+          {
+            required: true,
+            message: this.$t("product_material.product.productUnitRules"),
+            trigger: "change",
+          },
+        ],
+        name: [
+          {
+            required: true,
+            message: this.$t("product_material.product.productNameRules"),
+            trigger: "blur",
+          },
+        ],
+        combination: [
+          {
+            required: true,
+            message: this.$t("product_material.product.combinationRules"),
+            trigger: "change",
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    handleSubmit() {
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          this.loading = true;
+          this.$emit("submit");
+        }
+      });
+    },
+    handleCancel() {
+      this.$emit("cancel");
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.form-box {
+  height: calc(100vh - 280px);
+  overflow: auto;
+  box-sizing: border-box;
+  padding: 5px;
+}
+</style>

src/views/product-material/product/index.vue

@@ -11,17 +11,86 @@
           }}</el-button>
         </el-card>
         <el-card class="bottom">
-          <by-table
-            v-loading="loading"
-            :data="tableList"
-            :columns="columns"
-            :pageNum.sync="req.pageNum"
-            :pageSize.sync="req.pageSize"
+          <query
             :selectConfig="selectConfig"
             :req="req"
-            :total="total"
-          >
-          </by-table>
+            :isShowMore="true"
+            @handleQuery="handleQuery"
+            @handleMore="
+              () => {
+                queryDialog = true;
+              }
+            "
+          ></query>
+          <el-table :data="tableList" v-loading="loading">
+            <el-table-column
+              :label="$t('product_material.product.productType')"
+              align="center"
+              prop="productType"
+            />
+            <el-table-column
+              :label="$t('product_material.product.productCode')"
+              align="center"
+              prop="productCode"
+            />
+            <el-table-column
+              :label="$t('product_material.product.productName')"
+              align="center"
+              prop="productName"
+            />
+            <el-table-column
+              :label="$t('product_material.product.productUnit')"
+              align="center"
+              prop="productUnit"
+            />
+            <el-table-column
+              :label="$t('product_material.product.deptId')"
+              align="center"
+              prop="deptId"
+            />
+            <el-table-column
+              :label="$t('product_material.product.lifeCycle')"
+              align="center"
+              prop="lifeCycle"
+            />
+            <el-table-column
+              :label="$t('product_material.product.cycleSales')"
+              align="center"
+              prop="cycleSales"
+              width="120"
+            />
+            <el-table-column
+              :label="$t('product_material.product.jdPurchasePrice')"
+              align="center"
+              prop="jdPurchasePrice"
+            />
+            <el-table-column
+              :label="$t('product_material.product.sellingPrice')"
+              align="center"
+              prop="sellingPrice"
+            />
+            <el-table-column
+              :label="$t('product_material.product.purchasePrice')"
+              align="center"
+              prop="purchasePrice"
+            />
+
+            <el-table-column
+              :label="$t('operation')"
+              align="center"
+              width="120"
+            >
+              <template slot-scope="scope">
+                <el-button type="text" @click="handleEdit(scope.row)"
+                  >{{ $t("edit") }}
+                </el-button>
+                <el-button type="text" @click="handleDelete(scope.row)"
+                  >{{ $t("delete") }}
+                </el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+
           <el-dialog
             :title="
               titleText === 'add'
@@ -31,16 +100,213 @@
             :visible.sync="open"
             v-if="open"
             width="50%"
+            top="60px"
+          >
+            <add-product
+              :form="form"
+              @submit="handleSubmit"
+              @cancel="handleCancel"
+              ref="addProduct"
+            ></add-product>
+          </el-dialog>
+
+          <el-dialog
+            :title="$t('seniorQuery')"
+            v-if="queryDialog"
+            :visible.sync="queryDialog"
+            width="50%"
+            top="60px"
           >
-            <test
-              ref="form"
-              v-model="dialogParams"
-              :form-config="dialogForm"
-              :insideRules="dialogRules"
-            ></test>
+            <div class="search-box">
+              <el-form :form="req" label-position="top" label-width="100px">
+                <el-form-item
+                  :label="$t('product_material.product.productType')"
+                >
+                  <el-radio-group v-model="req.type">
+                    <el-radio-button label="">
+                      {{ $t("product_material.product.all") }}
+                    </el-radio-button>
+                    <el-radio-button label="1">
+                      {{
+                        $t("product_material.product.finishedProduct")
+                      }}</el-radio-button
+                    >
+                    <el-radio-button label="2">
+                      {{
+                        $t("product_material.product.partiallyPreparedProducts")
+                      }}</el-radio-button
+                    >
+                  </el-radio-group>
+                </el-form-item>
+                <el-row :gutter="10">
+                  <el-col :span="6">
+                    <el-form-item
+                      :label="$t('product_material.product.productCode')"
+                    >
+                      <el-input
+                        v-model="req.code"
+                        :placeholder="$t('pleaseInput')"
+                      ></el-input>
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="18">
+                    <el-form-item
+                      :label="$t('product_material.product.productName')"
+                    >
+                      <el-input
+                        v-model="req.name"
+                        :placeholder="$t('pleaseInput')"
+                      ></el-input>
+                    </el-form-item>
+                  </el-col>
+                </el-row>
+                <el-form-item
+                  :label="$t('product_material.product.combination')"
+                >
+                  <el-radio-group v-model="req.combination">
+                    <el-radio-button label="">
+                      {{ $t("product_material.product.all") }}</el-radio-button
+                    >
+                    <el-radio-button label="1">
+                      {{ $t("product_material.product.yes") }}
+                    </el-radio-button>
+                    <el-radio-button label="0">
+                      {{ $t("product_material.product.no") }}</el-radio-button
+                    >
+                  </el-radio-group>
+                </el-form-item>
+                <el-form-item :label="$t('product_material.product.deptId')">
+                  <el-select
+                    v-model="req.deptId"
+                    :placeholder="$t('pleaseSelect')"
+                    style="width: 100%"
+                  >
+                    <el-option
+                      v-for="item in options"
+                      :key="item.value"
+                      :label="item.label"
+                      :value="item.value"
+                    >
+                    </el-option>
+                  </el-select>
+                </el-form-item>
+                <el-form-item
+                  :label="$t('product_material.product.jdPurchasePrice')"
+                >
+                  <el-row>
+                    <el-col :span="4">
+                      <el-form-item label-width="0px">
+                        <el-input
+                          v-model="req.jdPurchasePriceMin"
+                          :placeholder="$t('pleaseInput')"
+                        ></el-input>
+                      </el-form-item>
+                    </el-col>
+                    <el-col :span="2" style="text-align: center"> ~ </el-col>
+                    <el-col :span="4">
+                      <el-form-item label-width="0px">
+                        <el-input
+                          v-model="req.jdPurchasePriceMax"
+                          :placeholder="$t('pleaseInput')"
+                        ></el-input>
+                      </el-form-item>
+                    </el-col>
+                  </el-row>
+                </el-form-item>
+                <el-form-item
+                  :label="$t('product_material.product.sellingPrice')"
+                >
+                  <el-row>
+                    <el-col :span="4">
+                      <el-form-item label-width="0px">
+                        <el-input
+                          v-model="req.sellingPriceMin"
+                          :placeholder="$t('pleaseInput')"
+                        ></el-input>
+                      </el-form-item>
+                    </el-col>
+                    <el-col :span="2" style="text-align: center"> ~ </el-col>
+                    <el-col :span="4">
+                      <el-form-item label-width="0px">
+                        <el-input
+                          v-model="req.sellingPriceMax"
+                          :placeholder="$t('pleaseInput')"
+                        ></el-input>
+                      </el-form-item>
+                    </el-col>
+                  </el-row>
+                </el-form-item>
+                <el-form-item
+                  :label="$t('product_material.product.purchasePrice')"
+                >
+                  <el-row>
+                    <el-col :span="4">
+                      <el-form-item label-width="0px">
+                        <el-input
+                          v-model="req.purchasePriceMin"
+                          :placeholder="$t('pleaseInput')"
+                        ></el-input>
+                      </el-form-item>
+                    </el-col>
+                    <el-col :span="2" style="text-align: center"> ~ </el-col>
+                    <el-col :span="4">
+                      <el-form-item label-width="0px">
+                        <el-input
+                          v-model="req.purchasePriceMax"
+                          :placeholder="$t('pleaseInput')"
+                        ></el-input>
+                      </el-form-item>
+                    </el-col>
+                  </el-row>
+                </el-form-item>
+                <el-form-item :label="$t('product_material.product.lifeCycle')">
+                  <el-radio-group v-model="req.lifeCycle">
+                    <el-radio-button label="">
+                      {{ $t("product_material.product.all") }}</el-radio-button
+                    >
+                    <el-radio-button label="1">
+                      {{
+                        $t("product_material.product.newProductsExpectedSales")
+                      }}</el-radio-button
+                    >
+                    <el-radio-button label="2">
+                      {{
+                        $t("product_material.product.growUpExpectedSales")
+                      }}</el-radio-button
+                    >
+                    <el-radio-button
+                      :label="
+                        $t('product_material.product.matureExpectedSales')
+                      "
+                      name="3"
+                    ></el-radio-button>
+                  </el-radio-group>
+                </el-form-item>
+                <el-form-item
+                  :label="$t('product_material.product.clearancePeriod')"
+                >
+                  <el-date-picker
+                    v-model="timeArr"
+                    type="daterange"
+                    range-separator="-"
+                    value-format="yyyy-MM-dd"
+                    start-placeholder="开始日期"
+                    end-placeholder="结束日期"
+                    @change="handleDateChange"
+                  >
+                  </el-date-picker>
+                </el-form-item>
+              </el-form>
+            </div>
+            <div style="text-align: center; margin-top: 15px">
+              <el-button size="small" @click="handleReset"
+                >{{ $t("reset") }}
+              </el-button>
+              <el-button type="primary" size="small" @click="handleQuery">
+                {{ $t("submit") }}</el-button
+              >
+            </div>
           </el-dialog>
-          <!-- <el-dialog title="预览" :visible.sync="viewModal" width="500px">
-          </el-dialog> -->
         </el-card>
       </el-col>
     </el-row>
@@ -48,7 +314,10 @@
 </template>
 
 <script>
+import addProduct from "./addProduct.vue";
+import query from "@/components/query/index.vue";
 import tree from "./tree.vue";
+
 import byTable from "@/components/by-table/index.js";
 import test from "@/components/form-test/index.vue";
 
@@ -60,6 +329,8 @@ export default {
     tree,
     byTable,
     test,
+    addProduct,
+    query,
   },
   data() {
     return {
@@ -68,229 +339,63 @@ export default {
         pageSize: 10,
         keyword: "",
         classifyId: "",
+        lifeCycle: "",
+        deptId: "",
+        code: "",
+        name: "",
+        purchasePriceMin: "",
+        purchasePriceMax: "",
+        sellingPriceMin: "",
+        sellingPriceMax: "",
+        jdPurchasePriceMin: "",
+        jdPurchasePriceMax: "",
+        combination: "",
+        beginTime: "",
+        endTime: "",
+        warehouseId: "",
       },
       tableList: [],
       total: 0,
       loading: false,
-      open: false,
       selectConfig: [
         {
           label: this.$t("product_material.product.productType"),
           prop: "type",
-          data: [
-            { label: "半成品", value: 0 },
-            { label: "成品", value: 1 },
-          ],
-        },
-      ],
-      columns: [
-        {
-          label: this.$t("product_material.product.productType"),
-          prop: "type",
-          render: (h, params) => {
-            const item = this.dialogForm.type.data.find(
-              (item) => item.keyName === params.type
-            );
-            return <div>{item.labelName}</div>;
-          },
-        },
-        {
-          label: this.$t("product_material.product.productCode"),
-          prop: "code",
-        },
-        {
-          label: this.$t("product_material.product.productName"),
-          prop: "name",
-        },
-        {
-          label: this.$t("product_material.product.productUnit"),
-          prop: "unit",
+          data: [],
         },
         {
-          label: this.$t("product_material.product.description"),
-          prop: "introduce",
+          label: this.$t("product_material.product.deptId"),
+          prop: "deptId",
+          data: [],
         },
         {
-          align: "center",
-          label: this.$t("operation"),
-          actions: [
-            {
-              text: this.$t("edit"),
-              type: "text",
-              style: {
-                color: "red",
-              },
-              fn: ({ row }) => {
-                this.handleEdit(row);
-              },
-            },
-            {
-              text: this.$t("delete"),
-              type: "text",
-              // disabled: true,
-              style: {
-                color: "red",
-              },
-              fn: ({ row }) => {
-                this.handleDelete(row);
-              },
-            },
-          ],
+          label: this.$t("product_material.product.lifeCycle"),
+          prop: "lifeCycle",
+          data: [],
         },
       ],
-      dialogParams: {
+      open: false,
+      form: {
         classifyId: "",
+        deptId: "",
         type: "",
         code: "",
         name: "",
         unit: "",
-        introduce: "",
-      },
-      dialogForm: {
-        loadingStatus: false,
-        classifyId: {
-          label: this.$t("product_material.product.productClassify"),
-          type: "cascader",
-          props: {
-            label: "label",
-            value: "id",
-          },
-          width: "100%",
-          data: [],
-        },
-        type: {
-          label: this.$t("product_material.product.productType"),
-          type: "select",
-          span: 3,
-          labelName: "labelName",
-          keyName: "keyName",
-          data: [
-            {
-              labelName: this.$t("product_material.product.finishedProduct"),
-              keyName: 0,
-            },
-            {
-              labelName: this.$t(
-                "product_material.product.partiallyPreparedProducts"
-              ),
-              keyName: 1,
-            },
-          ],
-        },
-        code: {
-          span: 3,
-          label: this.$t("product_material.product.productCode"),
-          type: "input",
-        },
-        name: {
-          label: this.$t("product_material.product.productName"),
-          type: "input",
-        },
-        // unit: {
-        //   label: this.$t("product_material.product.productUnit"),
-        //   type: "select",
-        //   span: 3,
-        //   labelName: "labelName",
-        //   keyName: "keyName",
-        //   data: [
-        //     {
-        //       labelName: this.$t("product_material.product.finishedProduct"),
-        //       keyName: 0,
-        //     },
-        //     {
-        //       labelName: this.$t(
-        //         "product_material.product.partiallyPreparedProducts"
-        //       ),
-        //       keyName: 1,
-        //     },
-        //   ],
-        // },
-        introduce: {
-          label: this.$t("product_material.product.productDescription"),
-          type: "input",
-          itemType: "textarea",
-        },
-        // fileInfoList: {
-        //   label: this.$t("分组名称"),
-        //   type: "uploads",
-        //   data: [],
-        //   tip: "最多选择6个视频文件",
-        //   accept: ".avi,.wmv,.mkv,.mp4,.mov",
-        //   fileList: [],
-        // },
-        // videoClassifyId: {
-        //   label: this.$t("分组名称"),
-        //   type: "cascader",
-        //   props: {
-        //     label: "name",
-        //     value: "id",
-        //   },
-        //   data: [],
-        // },
-        // richText: {
-        //   label: this.$t("图文说明书"),
-        //   type: "editor",
-        // },
-
-        otherButton: {
-          align: "center",
-          list: [
-            {
-              name: this.$t("cancelText"),
-              methodsText: "cancel",
-              cancel: () => {
-                this.$refs.form.reset();
-                this.open = false;
-              },
-            },
-            {
-              name: this.$t("submitText"),
-              methodsText: "submit",
-              type: "primary",
-              submit: () => {
-                this.handleSubmit();
-              },
-            },
-          ],
-        },
-      },
-      dialogRules: {
-        classifyId: [
-          {
-            required: true,
-            message: this.$t("product_material.product.productClassifyRules"),
-            trigger: "change",
-          },
-        ],
-        type: [
-          {
-            required: true,
-            message: this.$t("product_material.product.productTypeRules"),
-            trigger: "change",
-          },
-        ],
-        code: [
-          {
-            required: true,
-            message: this.$t("product_material.product.productCodeRules"),
-            trigger: "blur",
-          },
-        ],
-        name: [
-          {
-            required: true,
-            message: this.$t("product_material.product.productNameRules"),
-            trigger: "blur",
-          },
-        ],
-        unit: [
-          {
-            required: true,
-            message: this.$t("product_material.product.productUnitRules"),
-            trigger: "change",
-          },
-        ],
+        combination: "",
+        purchasePrice: "",
+        sellingPrice: "",
+        jdPurchasePrice: "",
+        newProductsDay: "",
+        growUpDay: "",
+        newProductsExpectedSales: "",
+        growUpExpectedSales: "",
+        matureExpectedSales: "",
+        clearancePeriod: "",
+        productCombinationList: [],
       },
+      queryDialog: false,
+      timeArr: [],
     };
   },
   created() {
@@ -310,6 +415,37 @@ export default {
     this.getList();
   },
   methods: {
+    handleDateChange() {
+      this.req.beginTime = this.timeArr[0];
+      this.req.endTime = this.timeArr[1];
+    },
+    handleReset() {
+      this.req = {
+        pageNum: 1,
+        pageSize: 10,
+        keyword: "",
+        classifyId: "",
+        lifeCycle: "",
+        deptId: "",
+        code: "",
+        name: "",
+        purchasePriceMin: "",
+        purchasePriceMax: "",
+        sellingPriceMin: "",
+        sellingPriceMax: "",
+        jdPurchasePriceMin: "",
+        jdPurchasePriceMax: "",
+        combination: "",
+        beginTime: "",
+        endTime: "",
+        warehouseId: "",
+      };
+      this.timeArr = [];
+    },
+    handleQuery() {
+      console.log(this.req, "sss");
+      this.getList();
+    },
     getList() {
       this.loading = true;
       API.productList(this.req).then(
@@ -331,6 +467,29 @@ export default {
         }
       );
     },
+
+    handleCancel() {
+      this.form = {
+        classifyId: "",
+        deptId: "",
+        type: "",
+        code: "",
+        name: "",
+        unit: "",
+        combination: "",
+        purchasePrice: "",
+        sellingPrice: "",
+        jdPurchasePrice: "",
+        newProductsDay: "",
+        growUpDay: "",
+        newProductsExpectedSales: "",
+        growUpExpectedSales: "",
+        matureExpectedSales: "",
+        clearancePeriod: "",
+        productCombinationList: [],
+      };
+      this.open = false;
+    },
     productAdd() {
       this.titleText = "add";
       this.open = true;
@@ -362,46 +521,45 @@ export default {
       this.getList();
     },
     handleSubmit() {
-      this.$refs.form.$refs["form"].validate((valid) => {
-        if (valid) {
-          this.dialogForm.loadingStatus = true;
-          if (!this.dialogParams.id) {
-            API.productAdd(this.dialogParams).then(
-              () => {
-                this.msgSuccess(this.$t("addSuccess"));
-                this.$refs.form.reset();
-                this.open = false;
-                this.dialogForm.loadingStatus = false;
-                this.getList();
-              },
-              (err) => {
-                console.log("productAdd: " + err);
-                this.dialogForm.loadingStatus = false;
-              }
-            );
-          } else {
-            API.productEdit(this.dialogParams).then(
-              () => {
-                this.msgSuccess(this.$t("editSuccess"));
-                this.$refs.form.reset();
-                this.open = false;
-                this.dialogForm.loadingStatus = false;
-                this.getList();
-              },
-              (err) => {
-                console.log("productEdit: " + err);
-                this.dialogForm.loadingStatus = false;
-              }
-            );
+      if (this.form.id) {
+        API.productAdd(this.form).then(
+          () => {
+            this.msgSuccess(this.$t("addSuccess"));
+            this.$refs.addProduct.loading = false;
+            this.open = false;
+            this.getList();
+          },
+          (err) => {
+            console.log("productAdd: " + err);
+            this.$refs.addProduct.loading = false;
           }
-        }
-      });
+        );
+      } else {
+        API.productEdit(this.form).then(
+          () => {
+            this.msgSuccess(this.$t("editSuccess"));
+            this.open = false;
+            this.$refs.addProduct.loading = false;
+            this.getList();
+          },
+          (err) => {
+            console.log("productEdit: " + err);
+            this.$refs.addProduct.loading = false;
+          }
+        );
+      }
     },
   },
 };
 </script>
 
 <style lang="scss" scoped>
+.search-box {
+  height: calc(100vh - 280px);
+  overflow: auto;
+  box-sizing: border-box;
+  padding: 10px;
+}
 .right {
   height: calc(100vh - 110px);
   overflow-y: auto;

src/views/product-material/product/tree.vue

@@ -4,10 +4,13 @@
       <div class="bk"></div>
       <div>{{ $t("product_material.product.productClassify") }}</div>
     </div>
-    <div class="search">
+    <el-row class="search" style="display: flex; align-items: center">
       <el-input :placeholder="$t('search')" v-model="filterText" size="small">
       </el-input>
-    </div>
+      <div style="width: 100px; margin-left: 10px">
+        <el-button size="mini"> 添加</el-button>
+      </div>
+    </el-row>
     <el-tree
       ref="tree"
       :data="treeData"

src/views/product-material/spu/addSpu.vue

@@ -0,0 +1,142 @@
+<template>
+  <div v-loading="loading">
+    <div class="form-box">
+      <el-form
+        label-position="top"
+        :model="form"
+        :rules="formRules"
+        ref="form"
+        label-width="100px"
+      >
+        <el-row :gutter="10">
+          <el-col :span="6">
+            <el-form-item
+              :label="$t('product_material.spu.spuCode')"
+              prop="code"
+            >
+              <el-input
+                v-model="form.code"
+                :placeholder="$t('pleaseInput')"
+              ></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="18">
+            <el-form-item label=".">
+              <span>不输入则自动生成，自动编码规则示例：spu00001</span>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="18">
+            <el-form-item
+              :label="$t('product_material.spu.spuName')"
+              prop="name"
+            >
+              <el-input
+                v-model="form.name"
+                :placeholder="$t('pleaseInput')"
+              ></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <div style="margin-bottom: 20px">
+          <labelTitle
+            :content="$t('product_material.spu.associatedProducts')"
+          ></labelTitle>
+        </div>
+        <el-form-item label-width="0px">
+          <el-button> {{ $t("select") }}</el-button>
+        </el-form-item>
+        <el-form-item>
+          <el-table :data="form.productCombinationList">
+            <el-table-column
+              :label="$t('product_material.spu.productCode')"
+              prop="productCode"
+            >
+            </el-table-column>
+            <el-table-column
+              :label="$t('product_material.spu.productName')"
+              prop="productName"
+            >
+            </el-table-column>
+            <el-table-column
+              :label="$t('operation')"
+              width="100"
+              align="center"
+            >
+              <template slot-scope="scope">
+                <el-button type="text">{{ $t("delete") }}</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div style="text-align: center; margin-top: 15px">
+      <el-button size="small" @click="handleCancel"
+        >{{ $t("cancel") }}
+      </el-button>
+      <el-button type="primary" size="small" @click="handleSubmit">
+        {{ $t("submit") }}</el-button
+      >
+    </div>
+  </div>
+</template>
+
+<script>
+import labelTitle from "@/components/label-title/index.vue";
+export default {
+  name: "addSpu",
+  components: {
+    labelTitle,
+  },
+  props: {
+    form: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  data() {
+    return {
+      loading: false,
+      // form: {
+      //   code: "",
+      //   name: "",
+      //   productCombinationList: [],
+      // },
+      formRules: {
+        name: [
+          {
+            required: true,
+            message: this.$t("product_material.spu.spuNameRules"),
+            trigger: "blur",
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    handleSubmit() {
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          this.loading = true;
+          this.$emit("submit");
+        }
+      });
+    },
+    handleCancel() {
+      this.$emit("cancel");
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.form-box {
+  height: calc(100vh - 280px);
+  overflow: auto;
+  box-sizing: border-box;
+  padding: 5px;
+}
+</style>

src/views/product-material/spu/index.vue

@@ -1,11 +1,12 @@
 <template>
   <el-card class="box-card">
     <test v-model="queryParams" :form-config="queryForm"></test>
-    <!-- <el-row>
-      <el-button type="primary" size="small" @click="spuAdd">{{
-        $t("add")
-      }}</el-button>
-    </el-row> -->
+    <query
+      :selectConfig="[]"
+      :req="queryParams"
+      :isShowMore="false"
+      @handleQuery="handleQuery"
+    ></query>
 
     <el-table :data="tableList" v-loading="loading">
       <el-table-column
@@ -52,25 +53,29 @@
       "
       :visible.sync="open"
       v-if="open"
-      width="30%"
+      width="50%"
+      top="60px"
     >
-      <test
-        ref="form"
-        v-model="dialogParams"
-        :form-config="dialogForm"
-        :insideRules="dialogRules"
-      ></test>
+      <add-spu
+        :form="form"
+        @submit="handleSubmit"
+        @cancel="handleCancel"
+        ref="addSpu"
+      ></add-spu>
     </el-dialog>
   </el-card>
 </template>
 
 <script>
 import test from "@/components/form-test/index.vue";
-
+import addSpu from "./addSpu.vue";
+import query from "@/components/query/index.vue";
 import * as API from "@/api/product-material/product/index.js";
 export default {
   components: {
     test,
+    query,
+    addSpu,
   },
   data() {
     return {
@@ -82,27 +87,6 @@ export default {
         tdaProductId: "",
       },
       queryForm: {
-        keyword: {
-          label: this.$t("keyword"),
-          span: 6,
-        },
-        operation: {
-          // 搜索按钮操作
-          query: () => {
-            this.queryParams.pageNum = 1;
-            this.getList();
-          },
-          // 重置按钮操作
-          reset: () => {
-            this.queryParams = {
-              pageNum: 1,
-              pageSize: 10,
-              keyword: "",
-            };
-            this.queryParams.pageNum = 1;
-            this.getList();
-          },
-        },
         otherButton: {
           list: [
             {
@@ -121,60 +105,10 @@ export default {
       total: 3,
       open: false,
       titleText: "add",
-      dialogParams: {
-        classifyId: "",
-        type: "",
+      form: {
         code: "",
         name: "",
-        unit: "",
-        introduce: "",
-      },
-      dialogForm: {
-        loadingStatus: false,
-        code: {
-          span: 2,
-          label: this.$t("product_material.spu.spuCode"),
-          type: "input",
-        },
-        name: {
-          label: this.$t("product_material.spu.spuName"),
-          type: "input",
-        },
-        introduce: {
-          label: this.$t("product_material.spu.spuDescription"),
-          type: "input",
-          itemType: "textarea",
-        },
-        otherButton: {
-          align: "center",
-          list: [
-            {
-              name: this.$t("cancelText"),
-              methodsText: "cancel",
-              cancel: () => {
-                this.$refs.form.reset();
-                this.open = false;
-              },
-            },
-            {
-              name: this.$t("submitText"),
-              methodsText: "submit",
-              type: "primary",
-              submit: () => {
-                this.handleSubmit();
-              },
-            },
-          ],
-        },
-      },
-      dialogRules: {
-        name: [
-          {
-            required: true,
-            message: this.$t("product_material.spu.spuNameRules"),
-            trigger: "blur",
-          },
-        ],
+        productCombinationList: [],
       },
     };
   },
@@ -202,29 +136,49 @@ export default {
       this.titleText = "add";
       this.open = true;
     },
+    handleQuery() {
+      this.getList();
+    },
+    handleCancel() {
+      this.form = {
+        classifyId: "",
+        type: "",
+        code: "",
+        name: "",
+        unit: "",
+        introduce: "",
+        deptId: "",
+      };
+      this.open = false;
+    },
     handleSubmit() {
-      this.$refs.test.$refs["form"].validate((valid) => {
-        if (valid) {
-          this.dialogForm.loadingStatus = true;
-          API.tdaDeviceAdd(this.dialogParams).then(
-            () => {
-              this.msgSuccess(this.$t("addSuccess"));
-              this.open = false;
-              this.dialogForm.loadingStatus = false;
-              this.getList();
-            },
-            (err) => {
-              console.log("tdaDeviceAdd: " + err);
-              this.dialogForm.loadingStatus = false;
-            }
-          );
-          // } else {
-          //   setTimeout(() => {
-          //     const errorDiv = document.getElementsByClassName('is-error')
-          //     errorDiv[0].scrollIntoView()
-          //   }, 0)
-        }
-      });
+      if (this.form.id) {
+        API.materialAdd(this.form).then(
+          () => {
+            this.msgSuccess(this.$t("addSuccess"));
+            this.$refs.addProduct.loading = false;
+            this.open = false;
+            this.getList();
+          },
+          (err) => {
+            console.log("materialAdd: " + err);
+            this.$refs.addProduct.loading = false;
+          }
+        );
+      } else {
+        API.materialEdit(this.form).then(
+          () => {
+            this.msgSuccess(this.$t("editSuccess"));
+            this.open = false;
+            this.$refs.addProduct.loading = false;
+            this.getList();
+          },
+          (err) => {
+            console.log("materialEdit: " + err);
+            this.$refs.addProduct.loading = false;
+          }
+        );
+      }
     },
     handleDelete(row) {
       this.$confirm(this.$t("askDeleteData"), {

src/views/product-material/supply/addSupply.vue

@@ -0,0 +1,379 @@
+<template>
+  <div v-loading="loading">
+    <div class="form-box">
+      <el-form
+        label-position="top"
+        :model="form"
+        ref="form"
+        :rules="formRules"
+        label-width="100px"
+      >
+        <el-form-item
+          :label="$t('product_material.supply.supplyType')"
+          prop="type"
+        >
+          <el-radio-group v-model="form.type">
+            <el-radio-button
+              :label="$t('product_material.supply.finishedProduct')"
+              name="1"
+            ></el-radio-button>
+            <el-radio-button
+              :label="$t('product_material.supply.partiallyPreparedProducts')"
+              name="2"
+            ></el-radio-button>
+          </el-radio-group>
+        </el-form-item>
+
+        <el-row>
+          <el-col :span="8">
+            <el-form-item
+              :label="$t('product_material.supply.supplyCode')"
+              prop="code"
+            >
+              <el-input
+                v-model="form.code"
+                :placeholder="$t('pleaseInput')"
+              ></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-form-item
+          :label="$t('product_material.supply.supplyName')"
+          prop="name"
+        >
+          <el-input
+            v-model="form.name"
+            :placeholder="$t('pleaseInput')"
+          ></el-input>
+        </el-form-item>
+
+        <el-form-item :label="$t('product_material.supply.address')" required>
+          <el-row :gutter="10">
+            <el-col :span="8">
+              <el-form-item label-width="0" prop="countryId">
+                <el-select
+                  v-model="form.countryId"
+                  :placeholder="$t('product_material.supply.country')"
+                  style="width: 100%"
+                >
+                  <el-option
+                    v-for="item in options"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                  >
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label-width="0" prop="provinceId">
+                <el-select
+                  v-model="form.provinceId"
+                  :placeholder="$t('product_material.supply.province')"
+                  style="width: 100%"
+                >
+                  <el-option
+                    v-for="item in options"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                  >
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label-width="0" prop="cityId">
+                <el-select
+                  v-model="form.cityId"
+                  :placeholder="$t('product_material.supply.city')"
+                  style="width: 100%"
+                >
+                  <el-option
+                    v-for="item in options"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                  >
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form-item>
+
+        <!-- <el-row>
+          <el-col :span="12">
+            <el-form-item
+              :label="$t('product_material.supply.supplyType')"
+              prop="type"
+            >
+              <el-select
+                v-model="form.type"
+                :placeholder="$t('pleaseSelect')"
+                style="width: 100%"
+              >
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                >
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row> -->
+
+        <el-form-item label="" prop="detailedAddress">
+          <el-input
+            v-model="form.detailedAddress"
+            :placeholder="$t('pleaseInput')"
+            type="textarea"
+            rows="4"
+          ></el-input>
+        </el-form-item>
+
+        <el-form-item
+          :label="$t('product_material.supply.contactInfo')"
+          prop="contacts"
+        >
+          <el-row :gutter="10">
+            <el-col :span="8">
+              <el-form-item label-width="0" prop="contacts">
+                <el-input
+                  v-model="form.contacts"
+                  :placeholder="$t('pleaseInput')"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="16">
+              <el-form-item label-width="0" prop="phone">
+                <el-input
+                  v-model="form.phone"
+                  :placeholder="$t('pleaseInput')"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form-item>
+
+        <el-row :gutter="10">
+          <el-col :span="8">
+            <el-form-item
+              :label="$t('product_material.supply.accountingPeriod')"
+              prop="accountPeriod"
+            >
+              <el-input
+                v-model="form.accountPeriod"
+                :placeholder="$t('pleaseInput')"
+              ></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item
+              :label="$t('product_material.supply.returnAndReplacementPeriod')"
+              prop="returnPeriod"
+            >
+              <el-input
+                v-model="form.returnPeriod"
+                :placeholder="$t('pleaseInput')"
+              ></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-form-item :label="$t('product_material.supply.enclosure')">
+          <el-upload
+            class="upload-demo"
+            action="https://jsonplaceholder.typicode.com/posts/"
+            :on-preview="handlePreview"
+            :on-remove="handleRemove"
+            :on-success="handleSuccess"
+            multiple
+            :file-list="fileList"
+          >
+            <el-button size="small" type="primary">点击上传</el-button>
+          </el-upload>
+        </el-form-item>
+        <div style="margin-bottom: 20px">
+          <labelTitle
+            :content="$t('product_material.supply.backInfo')"
+          ></labelTitle>
+        </div>
+
+        <el-form-item
+          :label="$t('product_material.supply.accountName')"
+          prop="accountName"
+        >
+          <el-input
+            v-model="form.accountName"
+            :placeholder="$t('pleaseInput')"
+          ></el-input>
+        </el-form-item>
+        <el-form-item
+          :label="$t('product_material.supply.bankAccount')"
+          prop="bankAccount"
+        >
+          <el-input
+            v-model="form.bankAccount"
+            :placeholder="$t('pleaseInput')"
+          ></el-input>
+        </el-form-item>
+        <el-form-item
+          :label="$t('product_material.supply.bankOfDeposit')"
+          prop="bankOfDeposit"
+        >
+          <el-input
+            v-model="form.bankOfDeposit"
+            :placeholder="$t('pleaseInput')"
+          ></el-input>
+        </el-form-item>
+        <el-form-item
+          :label="$t('product_material.supply.bankNo')"
+          prop="interBankNo"
+        >
+          <el-input
+            v-model="form.interBankNo"
+            :placeholder="$t('pleaseInput')"
+          ></el-input>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div style="text-align: center; margin-top: 15px">
+      <el-button size="small" @click="handleCancel"
+        >{{ $t("cancel") }}
+      </el-button>
+      <el-button type="primary" size="small" @click="handleSubmit">
+        {{ $t("submit") }}</el-button
+      >
+    </div>
+  </div>
+</template>
+
+<script>
+import labelTitle from "@/components/label-title/index.vue";
+export default {
+  name: "addSpu",
+  components: {
+    labelTitle,
+  },
+  props: {
+    form: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  data() {
+    return {
+      loading: false,
+      formRules: {
+        countryId: [
+          {
+            required: true,
+            message:
+              this.$t("pleaseSelect") +
+              this.$t("product_material.supply.countryRules"),
+            trigger: "change",
+          },
+        ],
+        provinceId: [
+          {
+            required: true,
+            message:
+              this.$t("pleaseSelect") +
+              this.$t("product_material.supply.provinceIdRules"),
+            trigger: "change",
+          },
+        ],
+        cityId: [
+          {
+            required: true,
+            message:
+              this.$t("pleaseSelect") +
+              this.$t("product_material.supply.cityRules"),
+            trigger: "change",
+          },
+        ],
+        type: [
+          {
+            required: true,
+            message:
+              this.$t("pleaseSelect") +
+              this.$t("product_material.supply.supplyType"),
+            trigger: "change",
+          },
+        ],
+        name: [
+          {
+            required: true,
+            message:
+              this.$t("pleaseInput") +
+              this.$t("product_material.supply.supplyName"),
+            trigger: "blur",
+          },
+        ],
+        contacts: [
+          {
+            required: true,
+            message:
+              this.$t("pleaseInput") +
+              this.$t("product_material.supply.contacts"),
+            trigger: "blur",
+          },
+        ],
+        phone: [
+          {
+            required: true,
+            message:
+              this.$t("pleaseInput") +
+              this.$t("product_material.supply.contactNumber"),
+            trigger: "blur",
+          },
+        ],
+        accountPeriod: [
+          {
+            required: true,
+            message:
+              this.$t("pleaseInput") +
+              this.$t("product_material.supply.accountingPeriod"),
+            trigger: "blur",
+          },
+        ],
+        returnPeriod: [
+          {
+            required: true,
+            message:
+              this.$t("pleaseInput") +
+              this.$t("product_material.supply.returnAndReplacementPeriod"),
+            trigger: "blur",
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    handleSubmit() {
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          this.loading = true;
+          this.$emit("submit");
+        }
+      });
+    },
+    handleCancel() {
+      this.$emit("cancel");
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.form-box {
+  height: calc(100vh - 280px);
+  overflow: auto;
+  box-sizing: border-box;
+  padding: 5px;
+}
+</style>

src/views/product-material/supply/addSupplyPrice.vue

@@ -0,0 +1,125 @@
+<template>
+  <div v-loading="loading">
+    <div class="form-box">
+      <el-form
+        label-position="top"
+        :model="form"
+        :rules="formRules"
+        ref="form"
+        label-width="100px"
+      >
+        <el-form-item
+          :label="$t('product_material.supply.supplyName')"
+          prop="name"
+        >
+          <el-select
+            v-model="form.name"
+            :placeholder="$t('pleaseSelect')"
+            style="width: 100%"
+          >
+            <el-option
+              v-for="item in options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            >
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="$t('product_material.product.product')">
+          <el-row :gutter="10">
+            <el-col :span="9">
+              <el-input
+                v-model="form.code"
+                :placeholder="$t('product_material.product.productCode')"
+              ></el-input>
+            </el-col>
+            <el-col :span="12">
+              <el-input
+                v-model="form.name"
+                :placeholder="$t('product_material.product.productName')"
+              ></el-input>
+            </el-col>
+            <el-col :span="3">
+              <el-button size="small">{{ $t("select") }} </el-button>
+            </el-col>
+          </el-row>
+        </el-form-item>
+        <el-form-item
+          :label="$t('product_material.supply.priceMaintenance.price')"
+          prop="name"
+        >
+          <el-input
+            v-model="form.name"
+            :placeholder="$t('pleaseInput')"
+          ></el-input>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div style="text-align: center; margin-top: 15px">
+      <el-button size="small" @click="handleCancel"
+        >{{ $t("cancel") }}
+      </el-button>
+      <el-button type="primary" size="small" @click="handleSubmit">
+        {{ $t("submit") }}</el-button
+      >
+    </div>
+  </div>
+</template>
+
+<script>
+import labelTitle from "@/components/label-title/index.vue";
+export default {
+  name: "addSpu",
+  components: {
+    labelTitle,
+  },
+  props: {
+    form: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  data() {
+    return {
+      loading: false,
+      // form: {
+      //   code: "",
+      //   name: "",
+      //   productCombinationList: [],
+      // },
+      formRules: {
+        name: [
+          {
+            required: true,
+            message: this.$t("product_material.spu.spuNameRules"),
+            trigger: "blur",
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    handleSubmit() {
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          this.loading = true;
+          this.$emit("submit");
+        }
+      });
+    },
+    handleCancel() {
+      this.$emit("cancel");
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.form-box {
+  height: calc(100vh - 280px);
+  overflow: auto;
+  box-sizing: border-box;
+  padding: 5px;
+}
+</style>

src/views/product-material/supply/index.vue

@@ -89,340 +89,183 @@
         "
         :visible.sync="open"
         v-if="open"
-        width="40%"
+        width="50%"
+        top="60px"
       >
-        <el-form
-          label-position="left"
-          :model="submitForm"
-          ref="submitForm"
-          :rules="submitRules"
-          label-width="100px"
+        <add-supply
+          :form="form"
+          @submit="handleSubmit"
+          @cancel="handleCancel"
+          ref="addSupply"
         >
-          <el-row>
-            <el-col :span="12">
-              <el-form-item
-                :label="$t('product_material.supply.supplyType')"
-                prop="type"
-              >
-                <el-select
-                  v-model="submitForm.type"
-                  :placeholder="$t('pleaseSelect')"
-                  style="width: 100%"
-                >
-                  <el-option
-                    v-for="item in options"
-                    :key="item.value"
-                    :label="item.label"
-                    :value="item.value"
-                  >
-                  </el-option>
-                </el-select>
-              </el-form-item>
-            </el-col>
-          </el-row>
-          <el-row>
-            <el-col :span="12">
-              <el-form-item
-                :label="$t('product_material.supply.supplyCode')"
-                prop="code"
-              >
-                <el-input
-                  v-model="submitForm.code"
-                  :placeholder="$t('pleaseInput')"
-                ></el-input>
-              </el-form-item>
-            </el-col>
-          </el-row>
-          <el-form-item
-            :label="$t('product_material.supply.supplyName')"
-            prop="name"
-          >
-            <el-input
-              v-model="submitForm.name"
-              :placeholder="$t('pleaseInput')"
-            ></el-input>
-          </el-form-item>
-          <el-form-item :label="$t('product_material.supply.city')" prop="city">
-            <el-select
-              v-model="submitForm.city"
-              :placeholder="$t('pleaseSelect')"
-              style="width: 100%"
-            >
-              <el-option
-                v-for="item in options"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              >
-              </el-option>
-            </el-select>
-          </el-form-item>
-          <el-form-item
-            :label="$t('product_material.supply.address')"
-            prop="detailedAddress"
-          >
-            <el-input
-              v-model="submitForm.detailedAddress"
-              :placeholder="$t('pleaseInput')"
-            ></el-input>
-          </el-form-item>
-          <el-row>
-            <el-col :span="12">
-              <el-form-item
-                :label="$t('product_material.supply.contacts')"
-                prop="contacts"
-              >
-                <el-input
-                  v-model="submitForm.contacts"
-                  :placeholder="$t('pleaseInput')"
-                ></el-input>
-              </el-form-item>
-            </el-col>
-            <el-col :span="12">
-              <el-form-item
-                :label="$t('product_material.supply.contactNumber')"
-                prop="phone"
-              >
-                <el-input
-                  v-model="submitForm.phone"
-                  :placeholder="$t('pleaseInput')"
-                ></el-input>
-              </el-form-item>
-            </el-col>
-          </el-row>
-          <el-row>
-            <el-col :span="8">
-              <el-form-item
-                :label="$t('product_material.supply.accountingPeriod')"
-                prop="accountPeriod"
-              >
-                <el-input
-                  v-model="submitForm.accountPeriod"
-                  :placeholder="$t('pleaseInput')"
-                ></el-input>
-              </el-form-item>
-            </el-col>
-          </el-row>
-          <el-row>
-            <el-col :span="8">
-              <el-form-item
-                :label="
-                  $t('product_material.supply.returnAndReplacementPeriod')
-                "
-                prop="returnPeriod"
-              >
-                <el-input
-                  v-model="submitForm.returnPeriod"
-                  :placeholder="$t('pleaseInput')"
-                ></el-input>
-              </el-form-item>
-            </el-col>
-          </el-row>
-          <el-form-item :label="$t('product_material.supply.enclosure')">
-            <el-upload
-              class="upload-demo"
-              action="https://jsonplaceholder.typicode.com/posts/"
-              :on-preview="handlePreview"
-              :on-remove="handleRemove"
-              :on-success="handleSuccess"
-              multiple
-              :file-list="fileList"
-            >
-              <el-button size="small" type="primary">点击上传</el-button>
-            </el-upload>
-          </el-form-item>
-          <labelTitle
-            :content="$t('product_material.supply.backInfo')"
-          ></labelTitle>
-
-          <el-form-item
-            :label="$t('product_material.supply.accountName')"
-            prop="accountName"
-          >
-            <el-input
-              v-model="submitForm.accountName"
-              :placeholder="$t('pleaseInput')"
-            ></el-input>
-          </el-form-item>
-          <el-form-item
-            :label="$t('product_material.supply.bankAccount')"
-            prop="bankAccount"
-          >
-            <el-input
-              v-model="submitForm.bankAccount"
-              :placeholder="$t('pleaseInput')"
-            ></el-input>
-          </el-form-item>
-          <el-form-item
-            :label="$t('product_material.supply.bankOfDeposit')"
-            prop="bankOfDeposit"
-          >
-            <el-input
-              v-model="submitForm.bankOfDeposit"
-              :placeholder="$t('pleaseInput')"
-            ></el-input>
-          </el-form-item>
-          <el-form-item
-            :label="$t('product_material.supply.bankNo')"
-            prop="interBankNo"
-          >
-            <el-input
-              v-model="submitForm.interBankNo"
-              :placeholder="$t('pleaseInput')"
-            ></el-input>
-          </el-form-item>
-
-          <div style="text-align: center">
-            <el-button size="small">{{ $t("cancel") }} </el-button>
-            <el-button type="primary" size="small">
-              {{ $t("submit") }}</el-button
-            >
-          </div>
-        </el-form>
+        </add-supply>
       </el-dialog>
 
       <el-dialog
         :title="$t('seniorQuery')"
         :visible.sync="queryDialog"
         v-if="queryDialog"
-        width="30%"
+        width="50%"
+        top="60px"
       >
-        <el-form
-          label-position="top"
-          :model="queryParams"
-          ref="queryForm"
-          label-width="100px"
-        >
-          <el-row>
-            <el-col :span="12">
-              <el-form-item
-                :label="$t('product_material.supply.supplyType')"
-                prop="type"
-              >
-                <el-select
-                  v-model="queryParams.type"
-                  :placeholder="$t('pleaseSelect')"
-                  style="width: 100%"
-                >
-                  <el-option
-                    v-for="item in options"
-                    :key="item.value"
-                    :label="item.label"
-                    :value="item.value"
-                  >
-                  </el-option>
-                </el-select>
-              </el-form-item>
-            </el-col>
-          </el-row>
-          <el-row>
-            <el-col :span="12">
-              <el-form-item
-                :label="$t('product_material.supply.supplyCode')"
-                prop="code"
-              >
-                <el-input
-                  v-model="queryParams.code"
-                  :placeholder="$t('pleaseInput')"
-                ></el-input>
-              </el-form-item>
-            </el-col>
-          </el-row>
-          <el-form-item
-            :label="$t('product_material.supply.supplyName')"
-            prop="name"
+        <div class="search-box">
+          <el-form
+            label-position="top"
+            :model="queryParams"
+            ref="queryForm"
+            label-width="100px"
           >
-            <el-input
-              v-model="queryParams.name"
-              :placeholder="$t('pleaseInput')"
-            ></el-input>
-          </el-form-item>
-          <el-form-item :label="$t('product_material.supply.city')" prop="city">
-            <el-select
-              v-model="queryParams.city"
-              :placeholder="$t('pleaseSelect')"
-              style="width: 100%"
+            <el-form-item
+              :label="$t('product_material.supply.supplyType')"
+              prop="type"
             >
-              <el-option
-                v-for="item in options"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              >
-              </el-option>
-            </el-select>
-          </el-form-item>
-          <el-form-item
-            :label="$t('product_material.supply.address')"
-            prop="detailedAddress"
-          >
-            <el-input
-              v-model="queryParams.detailedAddress"
-              :placeholder="$t('pleaseInput')"
-            ></el-input>
-          </el-form-item>
-          <el-row :gutter="20">
-            <el-col :span="12">
-              <el-form-item
-                :label="$t('product_material.supply.contacts')"
-                prop="contacts"
-              >
-                <el-input
-                  v-model="queryParams.contacts"
-                  :placeholder="$t('pleaseInput')"
-                ></el-input>
-              </el-form-item>
-            </el-col>
-
-            <el-col :span="12">
-              <el-form-item
-                :label="$t('product_material.supply.contactNumber')"
-                prop="phone"
-              >
-                <el-input
-                  v-model="queryParams.phone"
-                  :placeholder="$t('pleaseInput')"
-                ></el-input>
-              </el-form-item>
-            </el-col>
-          </el-row>
-          <el-row>
-            <el-col :span="8">
-              <el-form-item
-                :label="$t('product_material.supply.accountingPeriod')"
-                prop="accountPeriod"
-              >
-                <el-input
-                  v-model="queryParams.accountPeriod"
-                  :placeholder="$t('pleaseInput')"
-                ></el-input>
-              </el-form-item>
-            </el-col>
-          </el-row>
-          <el-row>
-            <el-col :span="8">
-              <el-form-item
-                :label="
-                  $t('product_material.supply.returnAndReplacementPeriod')
-                "
-                prop="returnPeriod"
-              >
-                <el-input
-                  v-model="queryParams.returnPeriod"
-                  :placeholder="$t('pleaseInput')"
-                ></el-input>
-              </el-form-item>
-            </el-col>
-          </el-row>
-          <div style="text-align: center">
-            <el-button size="small" @click="queryDialog = false"
-              >{{ $t("cancel") }}
-            </el-button>
-            <el-button type="primary" size="small" @click="handleQuery">
-              {{ $t("submit") }}</el-button
+              <el-radio-group v-model="form.type">
+                <el-radio-button
+                  :label="$t('product_material.supply.finishedProduct')"
+                  name="1"
+                ></el-radio-button>
+                <el-radio-button
+                  :label="
+                    $t('product_material.supply.partiallyPreparedProducts')
+                  "
+                  name="2"
+                ></el-radio-button>
+              </el-radio-group>
+            </el-form-item>
+            <el-row>
+              <el-col :span="8">
+                <el-form-item
+                  :label="$t('product_material.supply.supplyCode')"
+                  prop="code"
+                >
+                  <el-input
+                    v-model="queryParams.code"
+                    :placeholder="$t('pleaseInput')"
+                  ></el-input>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-form-item
+              :label="$t('product_material.supply.supplyName')"
+              prop="name"
+            >
+              <el-input
+                v-model="queryParams.name"
+                :placeholder="$t('pleaseInput')"
+              ></el-input>
+            </el-form-item>
+            <el-form-item :label="$t('product_material.supply.whereCity')">
+              <el-row :gutter="10">
+                <el-col :span="8">
+                  <el-form-item label-width="0" prop="countryId">
+                    <el-select
+                      v-model="form.countryId"
+                      :placeholder="$t('product_material.supply.country')"
+                      style="width: 100%"
+                    >
+                      <el-option
+                        v-for="item in options"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value"
+                      >
+                      </el-option>
+                    </el-select>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="8">
+                  <el-form-item label-width="0" prop="provinceId">
+                    <el-select
+                      v-model="form.provinceId"
+                      :placeholder="$t('product_material.supply.province')"
+                      style="width: 100%"
+                    >
+                      <el-option
+                        v-for="item in options"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value"
+                      >
+                      </el-option>
+                    </el-select>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="8">
+                  <el-form-item label-width="0" prop="cityId">
+                    <el-select
+                      v-model="form.cityId"
+                      :placeholder="$t('product_material.supply.city')"
+                      style="width: 100%"
+                    >
+                      <el-option
+                        v-for="item in options"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value"
+                      >
+                      </el-option>
+                    </el-select>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+            </el-form-item>
+            <el-form-item
+              :label="$t('product_material.supply.accountingPeriod')"
+            >
+              <el-row :gutter="10">
+                <el-col :span="6">
+                  <el-form-item prop="">
+                    <el-input
+                      v-model="queryParams.name"
+                      :placeholder="$t('pleaseInput')"
+                    ></el-input>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="1" style="text-align: center"> ~</el-col>
+                <el-col :span="6">
+                  <el-form-item prop="">
+                    <el-input
+                      v-model="queryParams.name"
+                      :placeholder="$t('pleaseInput')"
+                    ></el-input>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+            </el-form-item>
+            <el-form-item
+              :label="$t('product_material.supply.returnAndReplacementPeriod')"
             >
-          </div>
-        </el-form>
+              <el-row :gutter="10">
+                <el-col :span="6">
+                  <el-form-item prop="">
+                    <el-input
+                      v-model="queryParams.name"
+                      :placeholder="$t('pleaseInput')"
+                    ></el-input>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="1" style="text-align: center"> ~</el-col>
+                <el-col :span="6">
+                  <el-form-item prop="">
+                    <el-input
+                      v-model="queryParams.name"
+                      :placeholder="$t('pleaseInput')"
+                    ></el-input>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+            </el-form-item>
+          </el-form>
+        </div>
+
+        <div style="text-align: center; margin-top: 15px">
+          <el-button size="small" @click="handleReset"
+            >{{ $t("reset") }}
+          </el-button>
+          <el-button type="primary" size="small" @click="handleQuery">
+            {{ $t("submit") }}</el-button
+          >
+        </div>
       </el-dialog>
     </el-card>
   </div>
@@ -431,7 +274,7 @@
 <script>
 import test from "@/components/form-test/index.vue";
 import query from "@/components/query/index.vue";
-
+import addSupply from "./addSupply.vue";
 import * as API from "@/api/product-material/product/index.js";
 
 import labelTitle from "@/components/label-title/index.vue";
@@ -440,6 +283,7 @@ export default {
     test,
     query,
     labelTitle,
+    addSupply,
   },
   data() {
     return {
@@ -500,11 +344,6 @@ export default {
           prop: "accountPeriodType",
           data: [],
         },
-        {
-          label: this.$t("product_material.supply.returnAndReplacementPeriod"),
-          prop: "returnPeriodType",
-          data: [{ ss: "ss" }],
-        },
       ],
       queryDialog: false,
       tableList: [],
@@ -512,7 +351,7 @@ export default {
       total: 3,
       open: false,
       titleText: "add",
-      submitForm: {
+      form: {
         type: "",
         name: "",
         code: "",
@@ -532,62 +371,6 @@ export default {
         fileInfoList: [],
       },
       fileList: [],
-      submitRules: {
-        type: [
-          {
-            required: true,
-            message:
-              this.$t("pleaseSelect") +
-              this.$t("product_material.supply.supplyType"),
-            trigger: "change",
-          },
-        ],
-        name: [
-          {
-            required: true,
-            message:
-              this.$t("pleaseInput") +
-              this.$t("product_material.supply.supplyName"),
-            trigger: "blur",
-          },
-        ],
-        contacts: [
-          {
-            required: true,
-            message:
-              this.$t("pleaseInput") +
-              this.$t("product_material.supply.contacts"),
-            trigger: "blur",
-          },
-        ],
-        phone: [
-          {
-            required: true,
-            message:
-              this.$t("pleaseInput") +
-              this.$t("product_material.supply.contactNumber"),
-            trigger: "blur",
-          },
-        ],
-        accountPeriod: [
-          {
-            required: true,
-            message:
-              this.$t("pleaseInput") +
-              this.$t("product_material.supply.accountingPeriod"),
-            trigger: "blur",
-          },
-        ],
-        returnPeriod: [
-          {
-            required: true,
-            message:
-              this.$t("pleaseInput") +
-              this.$t("product_material.supply.returnAndReplacementPeriod"),
-            trigger: "blur",
-          },
-        ],
-      },
     };
   },
   created() {},
@@ -622,30 +405,59 @@ export default {
       this.titleText = "add";
       this.open = true;
     },
+    handleCancel() {
+      this.form = {
+        type: "",
+        name: "",
+        code: "",
+        contacts: "",
+        phone: "",
+        phonePrefixType: "",
+        countryId: "",
+        provinceId: "",
+        cityId: "",
+        detailedAddress: "",
+        accountPeriod: "",
+        returnPeriod: "",
+        accountName: "",
+        bankAccount: "",
+        bankOfDeposit: "",
+        interBankNo: "",
+        fileInfoList: [],
+      };
+      this.fileList = [];
+      this.open = false;
+    },
     handleSubmit() {
-      this.$refs.form.$refs["form"].validate((valid) => {
-        if (valid) {
-          this.dialogForm.loadingStatus = true;
-          API.tdaDeviceAdd(this.dialogParams).then(
-            () => {
-              this.msgSuccess(this.$t("addSuccess"));
-              this.open = false;
-              this.dialogForm.loadingStatus = false;
-              this.getList();
-            },
-            (err) => {
-              console.log("tdaDeviceAdd: " + err);
-              this.dialogForm.loadingStatus = false;
-            }
-          );
-          // } else {
-          //   setTimeout(() => {
-          //     const errorDiv = document.getElementsByClassName('is-error')
-          //     errorDiv[0].scrollIntoView()
-          //   }, 0)
-        }
-      });
+      if (this.form.id) {
+        API.productAdd(this.form).then(
+          () => {
+            this.msgSuccess(this.$t("addSuccess"));
+            this.$refs.addProduct.loading = false;
+            this.open = false;
+            this.getList();
+          },
+          (err) => {
+            console.log("productAdd: " + err);
+            this.$refs.addProduct.loading = false;
+          }
+        );
+      } else {
+        API.productEdit(this.form).then(
+          () => {
+            this.msgSuccess(this.$t("editSuccess"));
+            this.open = false;
+            this.$refs.addProduct.loading = false;
+            this.getList();
+          },
+          (err) => {
+            console.log("productEdit: " + err);
+            this.$refs.addProduct.loading = false;
+          }
+        );
+      }
     },
+
     handleDelete(row) {
       this.$confirm(this.$t("askDeleteData"), {
         confirmButtonText: this.$t("submitText"),
@@ -666,6 +478,12 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.search-box {
+  height: calc(100vh - 280px);
+  overflow: auto;
+  box-sizing: border-box;
+  padding: 10px;
+}
 .box-card {
   height: calc(100vh - 110px);
   overflow-y: auto;

src/views/product-material/supply/priceMaintenance.vue

@@ -16,22 +16,27 @@
       ></query>
       <el-table :data="tableList" v-loading="loading">
         <el-table-column
+          :label="$t('product_material.supply.supplyType')"
+          align="center"
+          prop="applicationName"
+        />
+        <el-table-column
           :label="$t('product_material.supply.supplyName')"
           align="center"
           prop="applicationName"
         />
         <el-table-column
-          :label="$t('product_material.supply.priceMaintenance.goodCode')"
+          :label="$t('product_material.product.productType')"
           align="center"
           prop="applicationName"
         />
         <el-table-column
-          :label="$t('product_material.supply.priceMaintenance.goodName')"
+          :label="$t('product_material.product.productCode')"
           align="center"
           prop="applicationName"
         />
         <el-table-column
-          :label="$t('product_material.supply.priceMaintenance.goodType')"
+          :label="$t('product_material.product.productName')"
           align="center"
           prop="applicationName"
         />
@@ -71,22 +76,12 @@
         v-if="open"
         width="50%"
       >
-        <!-- <el-form label-width="100px" :model="form">
-          <el-row>
-            <el-col :span="12">
-              <el-form-item :label="$t('product_material.supply.supplyCode')" prop="code">
-                <el-input v-model="form.name"  :placeholder="$t('product_material.supply.supplyCode')"></el-input>
-              </el-form-item>
-            </el-col>
-          </el-row>
-        
-        </el-form> -->
-        <test
-          ref="form"
-          v-model="dialogParams"
-          :form-config="dialogForm"
-          :insideRules="dialogRules"
-        ></test>
+        <add-supply-price
+          :form="form"
+          @submit="handleSubmit"
+          @cancel="handleCancel"
+          ref="addSupplyPrice"
+        ></add-supply-price>
       </el-dialog>
 
       <el-dialog
@@ -198,11 +193,13 @@ import test from "@/components/form-test/index.vue";
 import query from "@/components/query/index.vue";
 
 import * as API from "@/api/product-material/product/index.js";
+import addSupplyPrice from "./addSupplyPrice.vue";
 
 export default {
   components: {
     test,
     query,
+    addSupplyPrice,
   },
   data() {
     return {
@@ -227,19 +224,24 @@ export default {
               },
             },
 
-            {
-              name: this.$t("product_material.supply.priceMaintenance.back"),
-              methodsText: "back",
-              type: "defualt",
-              back: () => {
-                this.back();
-              },
-            },
+            // {
+            //   name: this.$t("product_material.supply.priceMaintenance.back"),
+            //   methodsText: "back",
+            //   type: "defualt",
+            //   back: () => {
+            //     this.back();
+            //   },
+            // },
           ],
         },
       },
       selectConfig: [
         {
+          label: this.$t("product_material.product.productType"),
+          prop: "type",
+          data: [],
+        },
+        {
           label: this.$t("product_material.supply.supplyType"),
           prop: "type",
           data: [],
@@ -251,7 +253,7 @@ export default {
       total: 3,
       open: false,
       titleText: "add",
-      dialogParams: {
+      form: {
         classifyId: "",
         type: "",
         code: "",

src/views/product-material/warehouse/addWarehouse.vue

@@ -0,0 +1,159 @@
+<template>
+  <div v-loading="loading">
+    <div class="form-box">
+      <el-form
+        label-position="top"
+        :model="form"
+        :rules="formRules"
+        ref="form"
+        label-width="100px"
+      >
+        <el-row>
+          <el-col :span="6">
+            <el-form-item
+              :label="$t('product_material.warehouse.warehouseType')"
+              prop="type"
+            >
+              <el-select
+                v-model="form.type"
+                :placeholder="$t('pleaseSelect')"
+                style="width: 100%"
+              >
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                >
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-form-item
+          :label="$t('product_material.warehouse.warehouseName')"
+          prop="name"
+        >
+          <el-input
+            v-model="form.name"
+            :placeholder="$t('pleaseInput')"
+          ></el-input>
+        </el-form-item>
+
+        <el-row>
+          <el-col :span="6">
+            <el-form-item
+              :label="$t('product_material.warehouse.storekeeper')"
+              prop="warehouseKeeperId"
+            >
+              <el-select
+                v-model="form.warehouseKeeperId"
+                :placeholder="$t('pleaseSelect')"
+                style="width: 100%"
+              >
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                >
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-form-item
+          :label="$t('product_material.warehouse.warehouseDescription')"
+        >
+          <el-input
+            v-model="form.remarks"
+            type="textarea"
+            :placeholder="$t('pleaseInput')"
+            :rows="4"
+          ></el-input>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div style="text-align: center; margin-top: 15px">
+      <el-button size="small" @click="handleCancel"
+        >{{ $t("cancel") }}
+      </el-button>
+      <el-button type="primary" size="small" @click="handleSubmit">
+        {{ $t("submit") }}</el-button
+      >
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "addWarehouse",
+  props: {
+    form: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  data() {
+    return {
+      loading: false,
+      // form: {
+      //   warehouseKeeperId: "",
+      //   type: "",
+      //   name: "",
+      //   remarks: "",
+      // },
+
+      formRules: {
+        type: [
+          {
+            required: true,
+            message: this.$t("product_material.warehouse.warehouseTypeRules"),
+            trigger: "change",
+          },
+        ],
+        warehouseKeeperId: [
+          {
+            required: true,
+            message: this.$t(
+              "product_material.warehouse.warehouseKeeperIdRules"
+            ),
+            trigger: "change",
+          },
+        ],
+
+        name: [
+          {
+            required: true,
+            message: this.$t("product_material.warehouse.warehouseNameRules"),
+            trigger: "blur",
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    handleSubmit() {
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          this.loading = true;
+          this.$emit("submit");
+        }
+      });
+    },
+    handleCancel() {
+      this.$emit("cancel");
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.form-box {
+  height: calc(100vh - 280px);
+  overflow: auto;
+  box-sizing: border-box;
+  padding: 5px;
+}
+</style>

src/views/product-material/warehouse/index.vue

@@ -7,7 +7,11 @@
       :req="queryParams"
       :isShowMore="false"
       @handleQuery="handleQuery"
-      @handleMore="() => {}"
+      @handleMore="
+        () => {
+          queryDialog = true;
+        }
+      "
     ></query>
 
     <el-table :data="tableList" v-loading="loading">
@@ -22,6 +26,11 @@
         prop="applicationName"
       />
       <el-table-column
+        :label="$t('product_material.warehouse.storekeeper')"
+        align="center"
+        prop="storekeeper"
+      />
+      <el-table-column
         :label="$t('product_material.warehouse.warehouseDescription')"
         align="center"
         prop="applicationName"
@@ -55,79 +64,15 @@
       "
       :visible.sync="open"
       v-if="open"
-      width="30%"
+      width="50%"
+      top="60px"
     >
-      <el-form
-        label-position="top"
-        :model="submitForm"
-        ref="submitForm"
-        :rules="submitRules"
-      >
-        <el-form-item
-          :label="$t('product_material.warehouse.warehouseType')"
-          prop="type"
-        >
-          <el-select
-            v-model="submitForm.type"
-            :placeholder="$t('pleaseSelect')"
-          >
-            <el-option
-              v-for="item in options"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-            >
-            </el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item
-          :label="$t('product_material.warehouse.warehouseName')"
-          prop="name"
-        >
-          <el-input
-            v-model="submitForm.name"
-            :placeholder="$t('pleaseInput')"
-          ></el-input>
-        </el-form-item>
-        <el-row>
-          <el-col :span="12">
-            <el-form-item
-              :label="$t('product_material.warehouse.storekeeper')"
-              prop="warehouseKeeperId"
-            >
-              <el-select
-                v-model="submitForm.warehouseKeeperId"
-                :placeholder="$t('pleaseSelect')"
-              >
-                <el-option
-                  v-for="item in options"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value"
-                >
-                </el-option>
-              </el-select>
-            </el-form-item>
-          </el-col>
-        </el-row>
-
-        <el-form-item
-          :label="$t('product_material.warehouse.warehouseDescription')"
-          prop="remarks"
-        >
-          <el-input
-            v-model="submitForm.remarks"
-            :placeholder="$t('pleaseInput')"
-            type="textarea"
-            :rows="4"
-          ></el-input>
-        </el-form-item>
-
-        <div style="text-align: center">
-          <el-button size="small">{{ $t("cancel") }} </el-button>
-          <el-button type="primary" size="small"> {{ $t("submit") }}</el-button>
-        </div>
-      </el-form>
+      <add-warehouse
+        :form="form"
+        @submit="handleSubmit"
+        @cancel="handleCancel"
+        ref="addWarehouse"
+      ></add-warehouse>
     </el-dialog>
   </el-card>
 </template>
@@ -135,12 +80,14 @@
 <script>
 import test from "@/components/form-test/index.vue";
 import query from "@/components/query/index.vue";
+import addWarehouse from "./addWarehouse.vue";
 
 import * as API from "@/api/product-material/product/index.js";
 export default {
   components: {
     test,
     query,
+    addWarehouse,
   },
   data() {
     return {
@@ -179,41 +126,12 @@ export default {
       total: 3,
       open: false,
       titleText: "add",
-      submitForm: {
+      form: {
+        warehouseKeeperId: "",
         type: "",
         name: "",
-        warehouseKeeperId: "",
         remarks: "",
       },
-      submitRules: {
-        type: [
-          {
-            required: true,
-            message:
-              this.$t("pleaseSelect") +
-              this.$t("product_material.warehouse.warehouseType"),
-            trigger: "change",
-          },
-        ],
-        name: [
-          {
-            required: true,
-            message:
-              this.$t("pleaseInput") +
-              this.$t("product_material.warehouse.warehouseName"),
-            trigger: "blur",
-          },
-        ],
-        warehouseKeeperId: [
-          {
-            required: true,
-            message:
-              this.$t("pleaseSelect") +
-              this.$t("product_material.warehouse.storekeeper"),
-            trigger: "change",
-          },
-        ],
-      },
     };
   },
   created() {},
@@ -243,29 +161,46 @@ export default {
       this.titleText = "add";
       this.open = true;
     },
+    handleCancel() {
+      this.form = {
+        classifyId: "",
+        type: "",
+        code: "",
+        name: "",
+        unit: "",
+        introduce: "",
+        deptId: "",
+      };
+      this.open = false;
+    },
     handleSubmit() {
-      this.$refs.test.$refs["form"].validate((valid) => {
-        if (valid) {
-          this.dialogForm.loadingStatus = true;
-          API.tdaDeviceAdd(this.dialogParams).then(
-            () => {
-              this.msgSuccess(this.$t("addSuccess"));
-              this.open = false;
-              this.dialogForm.loadingStatus = false;
-              this.getList();
-            },
-            (err) => {
-              console.log("tdaDeviceAdd: " + err);
-              this.dialogForm.loadingStatus = false;
-            }
-          );
-          // } else {
-          //   setTimeout(() => {
-          //     const errorDiv = document.getElementsByClassName('is-error')
-          //     errorDiv[0].scrollIntoView()
-          //   }, 0)
-        }
-      });
+      if (this.form.id) {
+        API.materialAdd(this.form).then(
+          () => {
+            this.msgSuccess(this.$t("addSuccess"));
+            this.$refs.addProduct.loading = false;
+            this.open = false;
+            this.getList();
+          },
+          (err) => {
+            console.log("materialAdd: " + err);
+            this.$refs.addProduct.loading = false;
+          }
+        );
+      } else {
+        API.materialEdit(this.form).then(
+          () => {
+            this.msgSuccess(this.$t("editSuccess"));
+            this.open = false;
+            this.$refs.addProduct.loading = false;
+            this.getList();
+          },
+          (err) => {
+            console.log("materialEdit: " + err);
+            this.$refs.addProduct.loading = false;
+          }
+        );
+      }
     },
     handleDelete(row) {
       this.$confirm(this.$t("askDeleteData"), {