仓库维护静态页

src/components/label-title/index.vue

@@ -19,17 +19,15 @@ export default {
   width: 100%;
   display: flex;
   align-items: center;
-  height: 24px;
-  line-height: 24px;
   .vertical-bar {
-    width: 2px;
-    height: 12px;
+    width: 3px;
+    height: 24px;
     background-color: #0084ff;
-    margin-right: 7px;
-    margin-top: 3px;
+    margin-right: 10px;
+    margin-top: 1px;
   }
   .content {
-    font-size: 13px;
+    font-size: 16px;
     font-weight: 600;
     color: #333333;
   }

src/components/query/index.vue

@@ -0,0 +1,189 @@
+<template>
+  <div class="content">
+    <div style="display: flex">
+      <div
+        class="by-dropdown"
+        v-for="(item, index) in selectConfig"
+        :key="index"
+      >
+        <div class="by-dropdown-title">
+          {{ item.label }} <i class="el-icon-caret-bottom el-icon--right"></i>
+        </div>
+        <ul class="by-dropdown-lists">
+          <li @click="allClick(item)">{{ $t("all") }}</li>
+          <li v-for="(li, i) in item.data" @click="handleClick(item, li)">
+            {{ li.label }}
+          </li>
+        </ul>
+      </div>
+    </div>
+    <div class="by-search">
+      <div style="display: flex">
+        <el-input
+          v-model="req.keyword"
+          :placeholder="$t('pleaseInput') + $t('keyword')"
+          suffix-icon="el-icon-search"
+          size="small"
+          @keyup.enter.native="handleInter()"
+        ></el-input>
+        <div class="more-icon" @click="handleMore" v-if="isShowMore">
+          <i class="el-icon-arrow-right el-icon--right"></i>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    selectConfig: {
+      type: Array,
+      default: () => [],
+    },
+    req: {
+      type: Object,
+      default: () => {
+        return {
+          pageNum: 1,
+          pageSize: 10,
+          keyword: "",
+        };
+      },
+    },
+    isShowMore: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  created() {
+    this.renderSearchInit();
+  },
+  methods: {
+    renderSearchInit() {
+      this.selectConfig.map((item) => {
+        item.labelCopy = JSON.parse(JSON.stringify(item));
+      });
+    },
+    allClick(item) {
+      this.req[item.prop] = null;
+      item.label = item.labelCopy.label;
+      this.$emit("handleQuery");
+    },
+    handleClick(item, li) {
+      item.label = li.label;
+      this.req[item.prop] = item.value;
+      this.$emit("handleQuery");
+    },
+    handleInter() {
+      this.$emit("handleQuery");
+    },
+    handleMore() {
+      this.$emit("handleMore", true);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.content {
+  display: flex;
+  justify-content: space-between;
+}
+.by-dropdown {
+  width: 120px;
+  position: relative;
+  text-align: center;
+  height: 32px;
+  z-index: 100;
+  transition: all 0.5s ease;
+  cursor: pointer;
+
+  .by-dropdown-title {
+    font-size: 14px;
+    background-color: #fff;
+  }
+  ul {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 32px;
+    padding: 0;
+    margin: 0;
+    z-index: 100;
+    display: none;
+    li {
+      list-style: none;
+      font-size: 12px;
+      height: 32px;
+      line-height: 32px;
+    }
+    li:hover {
+      background-color: #eff6ff;
+      color: #0084ff;
+    }
+  }
+}
+
+.by-dropdown::before {
+  display: block;
+  width: 120px;
+  content: " ";
+  position: absolute;
+  height: 8px;
+  top: 24px;
+  background-color: #fff;
+  left: 0;
+  z-index: 101;
+}
+
+.by-dropdown:hover {
+  background: #ffffff;
+  box-shadow: 0px 2px 16px 1px rgba(0, 0, 0, 0.1);
+  border-radius: 2px 2px 2px 2px;
+  opacity: 1;
+  ul {
+    background: #ffffff;
+    box-shadow: 0px 2px 16px 1px rgba(0, 0, 0, 0.1);
+    border-radius: 2px 2px 2px 2px;
+    opacity: 1;
+    display: block;
+  }
+}
+.by-search {
+  display: flex;
+  justify-content: space-between;
+  line-height: 32px;
+  padding-bottom: 24px;
+  .more-text {
+    font-size: 14px;
+    color: #666;
+    padding-left: 20px;
+    position: relative;
+    cursor: pointer;
+  }
+  .more-text:hover {
+    color: #0084ff;
+    i {
+      color: #0084ff;
+    }
+  }
+  .more-text::before {
+    content: " ";
+    position: absolute;
+    left: 0;
+    height: 14px;
+    background-color: #ddd;
+    width: 1px;
+    top: 10px;
+  }
+  .more-icon {
+    cursor: pointer;
+  }
+  .more-icon:hover {
+    i {
+      color: #0084ff;
+    }
+  }
+}
+</style>

src/lang/zh.js

@@ -16,13 +16,16 @@ export default {
   askDeleteData: '请问是否删除该条数据',
   add: "添加",
   edit: '编辑',
+  cancel: '取消',
+  submit: "确定",
   create_time: "创建时间",
   update_time: "更新时间",
-  keyword: "关键词",
+  keyword: "关键字",
   excelImport: 'Excel导入',
   pleaseSelect: '请选择',
   pleaseInput: '请输入',
-
+  all: "全部",
+  seniorQuery: "高级检索",
   wel: {
     info: '早安，Smallwei，Avuex一款超乎你想象的框架！',
     dept: '我是avue团队下的一个部门-哈皮部门-哈皮职位',
@@ -269,6 +272,14 @@ export default {
       spuNameRules: '请输入spu名称'
 
     },
+    warehouse: {
+      warehouseAdd: '添加仓库',
+      warehouseEdit: '仓库编辑',
+      warehouseType: "仓库类型",
+      warehouseName: '仓库名称',
+      warehouseDescription: "仓库说明",
+      storekeeper: '仓管员'
+    },
     supply: {
       supplyAdd: '添加供应商',
       supplyEdit: "编辑供应商",
@@ -283,6 +294,7 @@ export default {
       returnAndReplacementPeriod: '退换货期限',
       enclosure: '附件',
       address: "详细地址",
+      backInfo: "银行信息",
       accountName: '户名',
       bankAccount: '银行账户',
       bankOfDeposit: '开户银行',

src/router/page/index.js

@@ -201,6 +201,20 @@ export default [
     ],
   },
   {
+    path: '/product-material/warehouse',
+    component: Layout,
+    redirect: '/product-material/warehouse/index',
+    children: [
+      {
+        path: 'index',
+        name: '仓库维护',
+        component: () => import(/* webpackChunkName: "page" */ '@/views/product-material/warehouse/index'),
+        props: true,
+      },
+    ],
+  },
+
+  {
     path: '/product-material/supply',
     component: Layout,
     redirect: '/product-material/supply/index',

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

@@ -2,6 +2,18 @@
   <div>
     <el-card class="box-card">
       <test :form-config="btnForm"> </test>
+
+      <query
+        :selectConfig="selectConfig"
+        :req="queryParams"
+        :isShowMore="true"
+        @handleQuery="handleQuery"
+        @handleMore="
+          () => {
+            queryDialog = true;
+          }
+        "
+      ></query>
       <el-table :data="tableList" v-loading="loading">
         <el-table-column
           :label="$t('product_material.supply.supplyType')"
@@ -77,28 +89,340 @@
         "
         :visible.sync="open"
         v-if="open"
-        width="50%"
+        width="40%"
       >
-        <!-- <el-form label-width="100px" :model="form">
+        <el-form
+          label-position="left"
+          :model="submitForm"
+          ref="submitForm"
+          :rules="submitRules"
+          label-width="100px"
+        >
+          <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="form.name"  :placeholder="$t('product_material.supply.supplyCode')"></el-input>
+              <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> -->
-        <test
-          ref="form"
-          v-model="dialogParams"
-          :form-config="dialogForm"
-          :insideRules="dialogRules"
-        ></test>
+          <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>
       </el-dialog>
 
-   
- 
+      <el-dialog
+        :title="$t('seniorQuery')"
+        :visible.sync="queryDialog"
+        v-if="queryDialog"
+        width="30%"
+      >
+        <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"
+          >
+            <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-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
+            >
+          </div>
+        </el-form>
       </el-dialog>
     </el-card>
   </div>
@@ -106,6 +430,7 @@
 
 <script>
 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";
 
@@ -113,6 +438,7 @@ import labelTitle from "@/components/label-title/index.vue";
 export default {
   components: {
     test,
+    query,
     labelTitle,
   },
   data() {
@@ -120,9 +446,18 @@ export default {
       queryParams: {
         pageNum: 1,
         pageSize: 10,
+        type: "",
+        name: "",
+        code: "",
         keyword: "",
-        tdaApplicationId: "",
-        tdaProductId: "",
+        contacts: "",
+        phone: "",
+        phonePrefixType: "",
+        countryId: "",
+        provinceId: "",
+        cityId: "",
+        accountPeriod: "",
+        returnPeriod: "",
       },
       btnForm: {
         otherButton: {
@@ -154,152 +489,101 @@ export default {
           ],
         },
       },
-      tableList: [{}],
-      loading: false,
-      total: 3,
-      open: false,
-      titleText: "add",
-      dialogParams: {
-        classifyId: "",
-        type: "",
-        code: "",
-        name: "",
-        unit: "",
-        introduce: "",
-      },
-      dialogForm: {
-        loadingStatus: false,
-        type: {
+      selectConfig: [
+        {
           label: this.$t("product_material.supply.supplyType"),
-          type: "select",
-          span: 2,
-          labelName: "labelName",
-          keyName: "keyName",
+          prop: "type",
           data: [],
         },
-        code: {
-          span: 2,
-          label: this.$t("product_material.supply.supplyCode"),
-          type: "input",
-        },
-        name: {
-          label: this.$t("product_material.supply.supplyName"),
-          type: "input",
-        },
-        address: {
-          label: this.$t("product_material.supply.address"),
-          type: "input",
-        },
-        contacts: {
-          span: 2,
-          label: this.$t("product_material.supply.contacts"),
-          type: "input",
-        },
-        contactNumber: {
-          span: 2,
-          label: this.$t("product_material.supply.contactNumber"),
-          type: "input",
-        },
-        accountingPeriod: {
-          span: 2,
+        {
           label: this.$t("product_material.supply.accountingPeriod"),
-          type: "input",
+          prop: "accountPeriodType",
+          data: [],
         },
-        returnAndReplacementPeriod: {
-          span: 2,
+        {
           label: this.$t("product_material.supply.returnAndReplacementPeriod"),
-          type: "input",
-        },
-        enclosure: {
-          label: this.$t("product_material.supply.enclosure"),
-          type: "uploads",
-        },
-
-        accountName: {
-          span: 2,
-          label: this.$t("product_material.supply.accountName"),
-          type: "input",
-        },
-        bankAccount: {
-          span: 2,
-          label: this.$t("product_material.supply.bankAccount"),
-          type: "input",
-        },
-        bankOfDeposit: {
-          span: 2,
-          label: this.$t("product_material.supply.bankOfDeposit"),
-          type: "input",
-        },
-        bankNo: {
-          span: 2,
-          label: this.$t("product_material.supply.bankNo"),
-          type: "input",
-        },
-
-        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();
-              },
-            },
-          ],
+          prop: "returnPeriodType",
+          data: [],
         },
+      ],
+      queryDialog: false,
+      tableList: [],
+      loading: false,
+      total: 3,
+      open: false,
+      titleText: "add",
+      submitForm: {
+        type: "",
+        name: "",
+        code: "",
+        contacts: "",
+        phone: "",
+        phonePrefixType: "",
+        countryId: "",
+        provinceId: "",
+        cityId: "",
+        detailedAddress: "",
+        accountPeriod: "",
+        returnPeriod: "",
+        accountName: "",
+        bankAccount: "",
+        bankOfDeposit: "",
+        interBankNo: "",
+        fileInfoList: [],
       },
-      dialogRules: {
-        name: [
+      fileList: [],
+      submitRules: {
+        type: [
           {
             required: true,
-            message: this.$t("product_material.supply.supplyNameRules"),
-            trigger: "blur",
+            message:
+              this.$t("pleaseSelect") +
+              this.$t("product_material.supply.supplyType"),
+            trigger: "change",
           },
         ],
-        type: [
+        name: [
           {
             required: true,
-            message: this.$t("product_material.supply.supplyTypeRules"),
-            trigger: "change",
+            message:
+              this.$t("pleaseInput") +
+              this.$t("product_material.supply.supplyName"),
+            trigger: "blur",
           },
         ],
         contacts: [
           {
             required: true,
-            message: this.$t("product_material.supply.contactsRules"),
+            message:
+              this.$t("pleaseInput") +
+              this.$t("product_material.supply.contacts"),
             trigger: "blur",
           },
         ],
-        contactNumber: [
+        phone: [
           {
             required: true,
-            message: this.$t("product_material.supply.contactNumberRules"),
+            message:
+              this.$t("pleaseInput") +
+              this.$t("product_material.supply.contactNumber"),
             trigger: "blur",
           },
         ],
-        accountingPeriod: [
+        accountPeriod: [
           {
             required: true,
-            message: this.$t("product_material.supply.accountingPeriodRules"),
+            message:
+              this.$t("pleaseInput") +
+              this.$t("product_material.supply.accountingPeriod"),
             trigger: "blur",
           },
         ],
-        returnAndReplacementPeriod: [
+        returnPeriod: [
           {
             required: true,
-            message: this.$t(
-              "product_material.supply.returnAndReplacementPeriodRules"
-            ),
+            message:
+              this.$t("pleaseInput") +
+              this.$t("product_material.supply.returnAndReplacementPeriod"),
             trigger: "blur",
           },
         ],
@@ -308,6 +592,9 @@ export default {
   },
   created() {},
   methods: {
+    handleQuery() {
+      this.getList();
+    },
     go() {
       this.$router.push({
         path: "/product-material/supply/priceMaintenance",
@@ -371,6 +658,9 @@ export default {
         });
       });
     },
+    handlePreview() {},
+    handleRemove() {},
+    handleSuccess() {},
   },
 };
 </script>

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

@@ -2,9 +2,19 @@
   <div>
     <el-card class="box-card">
       <test :form-config="btnForm"> </test>
+
+      <query
+        :selectConfig="selectConfig"
+        :req="queryParams"
+        :isShowMore="true"
+        @handleQuery="handleQuery"
+        @handleMore="
+          () => {
+            queryDialog = true;
+          }
+        "
+      ></query>
       <el-table :data="tableList" v-loading="loading">
-  
-   
         <el-table-column
           :label="$t('product_material.supply.supplyName')"
           align="center"
@@ -15,22 +25,21 @@
           align="center"
           prop="applicationName"
         />
-          <el-table-column
+        <el-table-column
           :label="$t('product_material.supply.priceMaintenance.goodName')"
           align="center"
           prop="applicationName"
         />
-          <el-table-column
+        <el-table-column
           :label="$t('product_material.supply.priceMaintenance.goodType')"
           align="center"
           prop="applicationName"
         />
-          <el-table-column
+        <el-table-column
           :label="$t('product_material.supply.priceMaintenance.supplyPrice')"
           align="center"
           prop="applicationName"
         />
-        
 
         <el-table-column :label="$t('operation')" align="center" width="120">
           <template slot-scope="scope">
@@ -80,8 +89,105 @@
         ></test>
       </el-dialog>
 
-   
- 
+      <el-dialog
+        :title="$t('seniorQuery')"
+        :visible.sync="queryDialog"
+        v-if="queryDialog"
+        width="30%"
+      >
+        <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.supplyName')"
+                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.priceMaintenance.goodCode')"
+                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-form-item
+            :label="$t('product_material.supply.priceMaintenance.goodName')"
+            prop="name"
+          >
+            <el-input
+              v-model="queryParams.name"
+              :placeholder="$t('pleaseInput')"
+            ></el-input>
+          </el-form-item>
+
+          <el-row>
+            <el-col :span="12">
+              <el-form-item
+                :label="$t('product_material.supply.priceMaintenance.goodType')"
+                prop="code"
+              >
+                <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>
+
+          <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
+            >
+          </div>
+        </el-form>
       </el-dialog>
     </el-card>
   </div>
@@ -89,14 +195,14 @@
 
 <script>
 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 labelTitle from "@/components/label-title/index.vue";
 export default {
   components: {
     test,
-    labelTitle,
+    query,
   },
   data() {
     return {
@@ -132,6 +238,14 @@ export default {
           ],
         },
       },
+      selectConfig: [
+        {
+          label: this.$t("product_material.supply.supplyType"),
+          prop: "type",
+          data: [],
+        },
+      ],
+      queryDialog: false,
       tableList: [{}],
       loading: false,
       total: 3,
@@ -258,6 +372,9 @@ export default {
   },
   created() {},
   methods: {
+    handleQuery() {
+      this.getList();
+    },
     back() {
       this.$router.push({
         path: "/product-material/supply/index",

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

@@ -0,0 +1,291 @@
+<template>
+  <el-card class="box-card">
+    <test v-model="queryParams" :form-config="queryForm"></test>
+
+    <query
+      :selectConfig="selectConfig"
+      :req="queryParams"
+      :isShowMore="false"
+      @handleQuery="handleQuery"
+      @handleMore="() => {}"
+    ></query>
+
+    <el-table :data="tableList" v-loading="loading">
+      <el-table-column
+        :label="$t('product_material.warehouse.warehouseType')"
+        align="center"
+        prop="productName"
+      />
+      <el-table-column
+        :label="$t('product_material.warehouse.warehouseName')"
+        align="center"
+        prop="applicationName"
+      />
+      <el-table-column
+        :label="$t('product_material.warehouse.warehouseDescription')"
+        align="center"
+        prop="applicationName"
+      />
+
+      <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>
+
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <el-dialog
+      :title="
+        titleText === 'add'
+          ? $t('product_material.warehouse.warehouseAdd')
+          : $t('product_material.warehouse.warehouseEdit')
+      "
+      :visible.sync="open"
+      v-if="open"
+      width="30%"
+    >
+      <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>
+    </el-dialog>
+  </el-card>
+</template>
+
+<script>
+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";
+export default {
+  components: {
+    test,
+    query,
+  },
+  data() {
+    return {
+      selectConfig: [
+        {
+          label: this.$t("product_material.warehouse.warehouseType"),
+          prop: "type",
+          data: [
+            { label: "半成品", value: 0 },
+            { label: "成品", value: 1 },
+          ],
+        },
+      ],
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        keyword: "",
+        type: "",
+      },
+      queryForm: {
+        otherButton: {
+          list: [
+            {
+              name: this.$t("product_material.warehouse.warehouseAdd"),
+              methodsText: "add",
+              type: "primary",
+              add: () => {
+                this.Add();
+              },
+            },
+          ],
+        },
+      },
+      tableList: [],
+      loading: false,
+      total: 3,
+      open: false,
+      titleText: "add",
+      submitForm: {
+        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() {},
+  methods: {
+    handleEdit(row) {
+      this.titleText = "edit";
+      this.open = true;
+    },
+    getList() {
+      this.loading = true;
+      API.tdaDevicePage(this.queryParams).then(
+        (res) => {
+          this.total = res.data.data.total;
+          this.tableList = res.data.data.records;
+          this.loading = false;
+        },
+        (err) => {
+          console.log("tdaDevicePage: " + err);
+          this.loading = false;
+        }
+      );
+    },
+    handleQuery() {
+      this.getList();
+    },
+    Add() {
+      this.titleText = "add";
+      this.open = true;
+    },
+    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)
+        }
+      });
+    },
+    handleDelete(row) {
+      this.$confirm(this.$t("askDeleteData"), {
+        confirmButtonText: this.$t("submitText"),
+        cancelButtonText: this.$t("cancelText"),
+        type: "warning",
+      }).then(() => {
+        API.tdaDeviceDelete({ id: row.id }).then(() => {
+          this.msgSuccess(this.$t("deleteSuccess"));
+          this.getList();
+        });
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.box-card {
+  height: calc(100vh - 110px);
+  overflow-y: auto;
+}
+</style>