【修改】搜索框宽度

src/views/basic_data/material/price_list.vue

@@ -5,24 +5,41 @@
       <Collapse :is-collapse="isCollapse" :screen-form="screenForm">
         <template #right_btn>
           <el-button size="mini" @click="resetScreenForm">清空</el-button>
-          <el-button size="mini" type="primary" @click="submitScreenForm">搜索</el-button>
+          <el-button size="mini" type="primary" @click="submitScreenForm"
+            >搜索</el-button
+          >
         </template>
         <template #search>
-          <el-form ref="screenForm" :model="screenForm" label-width="70px" size="mini" label-position="left">
+          <el-form
+            ref="screenForm"
+            :model="screenForm"
+            label-width="70px"
+            size="mini"
+            label-position="left"
+          >
             <el-row :gutter="20">
               <el-col :xs="24" :sm="12" :lg="6">
                 <el-form-item label="物料编码" prop="materialNumber">
-                  <el-input v-model="screenForm.materialNumber" placeholder="请输入物料编码" />
+                  <el-input
+                    v-model="screenForm.materialNumber"
+                    placeholder="请输入物料编码"
+                  />
                 </el-form-item>
               </el-col>
               <el-col :xs="24" :sm="12" :lg="6">
                 <el-form-item label="产品名称" prop="materialName">
-                  <el-input v-model="screenForm.materialName" placeholder="请输入产品名称" />
+                  <el-input
+                    v-model="screenForm.materialName"
+                    placeholder="请输入产品名称"
+                  />
                 </el-form-item>
               </el-col>
               <el-col :xs="24" :sm="12" :lg="6">
                 <el-form-item label="产品编码" prop="materialOldNumber">
-                  <el-input v-model="screenForm.materialOldNumber" placeholder="请输入产品编码" />
+                  <el-input
+                    v-model="screenForm.materialOldNumber"
+                    placeholder="请输入产品编码"
+                  />
                 </el-form-item>
               </el-col>
               <!--          <el-col :xs="24" :sm="12" :lg="6">-->
@@ -49,28 +66,52 @@
               <!--          </el-col>-->
               <el-col :xs="24" :sm="12" :lg="6">
                 <el-form-item label="销售类型" prop="saleTypeId">
-                  <el-select v-model="screenForm.saleTypeId" filterable placeholder="选择销售类型" style="width: 100%">
+                  <el-select
+                    v-model="screenForm.saleTypeId"
+                    filterable
+                    placeholder="选择销售类型"
+                    style="width: 100%"
+                  >
                     <el-option label="全部" value="" />
-                    <el-option v-for="item in ztypeList" :key="item.id" :label="item.saleName" :value="item.id" />
+                    <el-option
+                      v-for="item in ztypeList"
+                      :key="item.id"
+                      :label="item.saleName"
+                      :value="item.id"
+                    />
                   </el-select>
                 </el-form-item>
               </el-col>
               <el-col :xs="24" :sm="12" :lg="6">
                 <el-form-item label="产品类别" prop="k3CategoryNumber">
-                  <el-select v-model="screenForm.k3CategoryNumber" placeholder="请选择产品类别">
+                  <el-select
+                    v-model="screenForm.k3CategoryNumber"
+                    style="width: 100%"
+                    placeholder="请选择产品类别"
+                  >
                     <el-option label="全部" value="" />
-                    <el-option v-for="item in dictList" :label="item.name" :value="item.number" />
+                    <el-option
+                      v-for="item in dictList"
+                      :label="item.name"
+                      :value="item.number"
+                    />
                   </el-select>
                 </el-form-item>
               </el-col>
               <el-col :xs="24" :sm="12" :lg="6">
                 <el-form-item label="规格型号" prop="specification">
-                  <el-input v-model="screenForm.specification" placeholder="请输入规格型号" />
+                  <el-input
+                    v-model="screenForm.specification"
+                    placeholder="请输入规格型号"
+                  />
                 </el-form-item>
               </el-col>
               <el-col :xs="24" :sm="12" :lg="6">
                 <el-form-item label="备注" prop="specification">
-                  <el-input v-model="screenForm.remark" placeholder="请输入备注" />
+                  <el-input
+                    v-model="screenForm.remark"
+                    placeholder="请输入备注"
+                  />
                 </el-form-item>
               </el-col>
             </el-row>
@@ -90,11 +131,22 @@
           title="内容确定删除吗？"
           @onConfirm="handleDelete"
         >
-          <el-button type="primary" size="mini" icon="el-icon-delete" slot="reference" class="el-popover-left"
+          <el-button
+            type="primary"
+            size="mini"
+            icon="el-icon-delete"
+            slot="reference"
+            class="el-popover-left"
             >删除</el-button
           >
         </el-popconfirm>
-        <el-button type="primary" style="margin-left: 10px" size="mini" @click="handleRevokeAll">批量作废</el-button>
+        <el-button
+          type="primary"
+          style="margin-left: 10px"
+          size="mini"
+          @click="handleRevokeAll"
+          >批量作废</el-button
+        >
         <!--        <el-button type="primary" size="mini">导出</el-button>-->
         <!-- <el-button type="primary" size="mini">打印</el-button> -->
       </div>
@@ -113,7 +165,11 @@
           @select-all="hanleSelectAll"
           @select="hanleSelectAll"
         >
-          <el-table-column type="selection" align="left" width="50"></el-table-column>
+          <el-table-column
+            type="selection"
+            align="left"
+            width="50"
+          ></el-table-column>
           <!--          <el-table-column type="selection" align="left" />-->
           <!-- <el-table-column
             align="left"
@@ -122,38 +178,91 @@
             min-width="160"
             show-overflow-tooltip
           ></el-table-column> -->
-          <el-table-column align="left" label="物料编码" prop="materialNumber" min-width="200" show-overflow-tooltip>
+          <el-table-column
+            align="left"
+            label="物料编码"
+            prop="materialNumber"
+            min-width="200"
+            show-overflow-tooltip
+          >
             <template slot-scope="scope">
               <CopyButton :copyText="scope.row.materialNumber" />
               <span>{{ scope.row.materialNumber }}</span>
             </template>
           </el-table-column>
-          <el-table-column align="left" label="产品编码" prop="materialOldNumber" min-width="200" show-overflow-tooltip>
+          <el-table-column
+            align="left"
+            label="产品编码"
+            prop="materialOldNumber"
+            min-width="200"
+            show-overflow-tooltip
+          >
             <template slot-scope="scope">
               <CopyButton :copyText="scope.row.materialOldNumber" />
               <span>{{ scope.row.materialOldNumber }}</span>
             </template>
           </el-table-column>
-          <el-table-column align="left" label="产品名称" prop="materialName" min-width="200" show-overflow-tooltip>
+          <el-table-column
+            align="left"
+            label="产品名称"
+            prop="materialName"
+            min-width="200"
+            show-overflow-tooltip
+          >
             <template slot-scope="scope">
               <CopyButton :copyText="scope.row.materialName" />
               <span>{{ scope.row.materialName }}</span>
             </template>
           </el-table-column>
-          <el-table-column align="left" label="规格型号" prop="specification" min-width="200" show-overflow-tooltip>
+          <el-table-column
+            align="left"
+            label="规格型号"
+            prop="specification"
+            min-width="200"
+            show-overflow-tooltip
+          >
             <template slot-scope="scope">
               <CopyButton :copyText="scope.row.specification" />
               <span>{{ scope.row.specification }}</span>
             </template>
           </el-table-column>
-          <el-table-column align="left" label="销售类型" prop="saleTypeName" min-width="160" show-overflow-tooltip />
-          <el-table-column align="left" label="单位" prop="unit" min-width="160" show-overflow-tooltip />
-          <el-table-column align="left" label="数量下限" prop="qty" min-width="160" show-overflow-tooltip />
-          <el-table-column align="left" label="返利类型（钱包）" prop="wallets" min-width="200" show-overflow-tooltip>
+          <el-table-column
+            align="left"
+            label="销售类型"
+            prop="saleTypeName"
+            min-width="160"
+            show-overflow-tooltip
+          />
+          <el-table-column
+            align="left"
+            label="单位"
+            prop="unit"
+            min-width="160"
+            show-overflow-tooltip
+          />
+          <el-table-column
+            align="left"
+            label="数量下限"
+            prop="qty"
+            min-width="160"
+            show-overflow-tooltip
+          />
+          <el-table-column
+            align="left"
+            label="返利类型（钱包）"
+            prop="wallets"
+            min-width="200"
+            show-overflow-tooltip
+          >
             <template slot-scope="scope">
               <template v-for="(item, index) in scope.row.wallets">
                 <template v-if="item.type === 'REBATE'">
-                  <el-tag :key="index" type="success" style="margin: 0 10px" size="mini">
+                  <el-tag
+                    :key="index"
+                    type="success"
+                    style="margin: 0 10px"
+                    size="mini"
+                  >
                     {{ item.walletName }}
                   </el-tag>
                 </template>
@@ -170,31 +279,82 @@
             <template slot-scope="scope">
               <template v-for="(item, index) in scope.row.wallets">
                 <template v-if="item.type === 'COMMONLY'">
-                  <el-tag :key="index" type="success" style="margin: 0 10px" size="mini">
+                  <el-tag
+                    :key="index"
+                    type="success"
+                    style="margin: 0 10px"
+                    size="mini"
+                  >
                     {{ item.walletName }}
                   </el-tag>
                 </template>
               </template>
             </template>
           </el-table-column>
-          <el-table-column align="left" label="生效日期" prop="startDate" min-width="160" show-overflow-tooltip />
+          <el-table-column
+            align="left"
+            label="生效日期"
+            prop="startDate"
+            min-width="160"
+            show-overflow-tooltip
+          />
 
-          <el-table-column align="left" label="失效日期" prop="endDate" min-width="160" show-overflow-tooltip />
-          <el-table-column align="left" label="是否销价" prop="isPromote" min-width="160" show-overflow-tooltip>
+          <el-table-column
+            align="left"
+            label="失效日期"
+            prop="endDate"
+            min-width="160"
+            show-overflow-tooltip
+          />
+          <el-table-column
+            align="left"
+            label="是否销价"
+            prop="isPromote"
+            min-width="160"
+            show-overflow-tooltip
+          >
             <template slot-scope="scope">
-              <el-tag size="mini" v-if="scope.row.isPromote" type="success">是</el-tag>
+              <el-tag size="mini" v-if="scope.row.isPromote" type="success"
+                >是</el-tag
+              >
               <el-tag size="mini" v-else type="danger">否</el-tag>
             </template>
           </el-table-column>
-          <el-table-column align="left" label="是否作废" prop="isRevoke" min-width="160" show-overflow-tooltip>
+          <el-table-column
+            align="left"
+            label="是否作废"
+            prop="isRevoke"
+            min-width="160"
+            show-overflow-tooltip
+          >
             <template slot-scope="scope">
-              <el-tag size="mini" v-if="scope.row.isRevoke" type="success">是</el-tag>
+              <el-tag size="mini" v-if="scope.row.isRevoke" type="success"
+                >是</el-tag
+              >
               <el-tag size="mini" v-else type="danger">否</el-tag>
             </template>
           </el-table-column>
-          <el-table-column align="right" label="批发价1" prop="batchPrice" min-width="160" show-overflow-tooltip />
-          <el-table-column align="right" label="格力折扣" prop="discAmount" min-width="160" show-overflow-tooltip />
-          <el-table-column align="left" label="备注" prop="remark" min-width="160" show-overflow-tooltip />
+          <el-table-column
+            align="right"
+            label="批发价1"
+            prop="batchPrice"
+            min-width="160"
+            show-overflow-tooltip
+          />
+          <el-table-column
+            align="right"
+            label="格力折扣"
+            prop="discAmount"
+            min-width="160"
+            show-overflow-tooltip
+          />
+          <el-table-column
+            align="left"
+            label="备注"
+            prop="remark"
+            min-width="160"
+            show-overflow-tooltip
+          />
           <el-table-column fixed="left" width="150" label="操作" align="center">
             <template slot-scope="scope">
               <el-popconfirm
@@ -203,7 +363,9 @@
                 title="作废吗？"
                 @onConfirm="handleRevoke(scope.row.id)"
               >
-                <el-button slot="reference" type="text" size="mini">作废</el-button>
+                <el-button slot="reference" type="text" size="mini"
+                  >作废</el-button
+                >
               </el-popconfirm>
 
               <el-button
@@ -234,9 +396,14 @@
 </template>
 
 <script>
-import Mixin from '@/mixin/index'
-import { getProductDelete, getProductPriceList, getTypeList, handlePriceRevoke } from '@/api/basic_data/material'
-import { getCategoryList } from '@/api/common'
+import Mixin from "@/mixin/index";
+import {
+  getProductDelete,
+  getProductPriceList,
+  getTypeList,
+  handlePriceRevoke,
+} from "@/api/basic_data/material";
+import { getCategoryList } from "@/api/common";
 
 export default {
   mixins: [Mixin],
@@ -247,42 +414,42 @@ export default {
       listTotal: 0, // 列表总数
       dataList: [],
       screenForm: {
-        k3CategoryNumber: '',
-        endDate: '',
-        materialName: '',
-        materialNumber: '',
-        materialOldNumber: '',
-        saleTypeId: '',
-        specification: '',
-        startDate: '',
-        remark: ''
+        k3CategoryNumber: "",
+        endDate: "",
+        materialName: "",
+        materialNumber: "",
+        materialOldNumber: "",
+        saleTypeId: "",
+        specification: "",
+        startDate: "",
+        remark: "",
       },
       ztypeList: [],
       dictList: {},
-      isCollapse: true
-    }
+      isCollapse: true,
+    };
   },
   mounted() {
-    getCategoryList({ pageNum: 1, pageSize: -1 }).then(res => {
-      this.dictList = res.data.records
-      console.log(this.dictList, 777777)
-    })
+    getCategoryList({ pageNum: 1, pageSize: -1 }).then((res) => {
+      this.dictList = res.data.records;
+      console.log(this.dictList, 777777);
+    });
   },
   methods: {
     addFn() {
-      this.showDialogForm = true
+      this.showDialogForm = true;
     },
 
     handleDelete(id) {
-      this.hanleDeleteAllPromise(id).then(ids => {
-        getProductDelete(ids).then(res => {
-          this.$successMsg('删除成功')
-          this.getList()
-        })
-      })
+      this.hanleDeleteAllPromise(id).then((ids) => {
+        getProductDelete(ids).then((res) => {
+          this.$successMsg("删除成功");
+          this.getList();
+        });
+      });
     },
     getList() {
-      this.listLoading = true
+      this.listLoading = true;
       const params = {
         pageNum: this.currentPage,
         pageSize: this.pageSize,
@@ -294,44 +461,44 @@ export default {
         saleTypeId: this.screenForm.saleTypeId,
         specification: this.screenForm.specification,
         startDate: this.screenForm.startDate,
-        remark: this.screenForm.remark
-      }
-      getProductPriceList(params).then(res => {
-        this.dataList = res.data.records
-        console.log(res.data.records)
-        this.listTotal = res.data.total
-        this.listLoading = false
-      })
-      getTypeList({ ...params, pageNum: 1, pageSize: -1 }).then(res => {
-        this.ztypeList = res.data.records
+        remark: this.screenForm.remark,
+      };
+      getProductPriceList(params).then((res) => {
+        this.dataList = res.data.records;
+        console.log(res.data.records);
+        this.listTotal = res.data.total;
+        this.listLoading = false;
+      });
+      getTypeList({ ...params, pageNum: 1, pageSize: -1 }).then((res) => {
+        this.ztypeList = res.data.records;
         // console.log(this.ztypeList, "type1111");
-      })
+      });
     },
     handleRevoke(id) {
-      handlePriceRevoke({ ids: id }).then(res => {
-        this.$successMsg('操作成功')
-        this.getList()
-      })
+      handlePriceRevoke({ ids: id }).then((res) => {
+        this.$successMsg("操作成功");
+        this.getList();
+      });
     },
     handleRevokeAll() {
       if (this.ids.length) {
-        handlePriceRevoke({ ids: this.ids.join('') }).then(res => {
-          this.$successMsg('操作成功')
-          this.getList()
-        })
+        handlePriceRevoke({ ids: this.ids.join("") }).then((res) => {
+          this.$successMsg("操作成功");
+          this.getList();
+        });
       } else {
-        this.$errorMsg('请选择')
+        this.$errorMsg("请选择");
       }
     },
     tableRowClassName({ row, rowIndex }) {
       // || row.examineStatus=='FAIL'
       if (this.ids.includes(row.id)) {
-        return 'warning-row'
+        return "warning-row";
       }
-      return ''
-    }
-  }
-}
+      return "";
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>