update

src/utils/init-something.js

@@ -0,0 +1,39 @@
+import { arr2obj } from "./data-transform";
+import Components from "@/views/common-dialog";
+
+export const initParams = (arr) => arr2obj(arr, "key", "value");
+
+export const initDicts = (arr) =>
+  arr
+    .filter((column) => column.type === "Select")
+    .map((column) => column.config.optionsName);
+
+export const initRules = (arr) => {
+  const rules = {};
+  arr
+    .filter((column) => column.require)
+    .forEach((column) => {
+      const message = `${column.title}不能为空`;
+      rules[column.key] = [
+        { required: true, message: message, trigger: "change" },
+      ];
+    });
+  return rules;
+};
+
+export const initComponents = (arr) => {
+  const c = {};
+  try {
+    arr
+      .filter((element) => element.type === "InputDialog")
+      .map((element) => element.config.componentName)
+      .forEach((element) => {
+        c[element] = Components[element];
+      });
+
+    return c;
+  } catch (err) {
+    return c;
+  } finally {
+  }
+};

src/views/common-dialog/api/index.js

@@ -7,3 +7,11 @@ export function list(url, params) {
     params: params,
   });
 }
+
+export function refer(data) {
+  return request({
+    url: `/refer/query`,
+    method: "POST",
+    data: data,
+  });
+}

src/views/common-dialog/index.js

@@ -17,3 +17,4 @@ export const Department = department;
 export const Supplier = supplier;
 export const Tax = tax;
 export const Currency = currency;
+export default { Tax, User, Supplier, Currency, Department, Organization };

src/views/common-dialog/organization.vue

@@ -1,6 +1,6 @@
 <script>
-import { initParams } from "./utils/init-something";
-import { list } from "./api/index";
+import { list, refer } from "./api/index";
+import { initParams } from "@/utils/init-something";
 
 export default {
   name: "OrganizationInputDialog",
@@ -62,6 +62,12 @@ export default {
       try {
         this.loading = true;
         const { pageNum, pageSize } = page;
+        // const { code, msg, rows, total } = await refer({
+        //   pageNum,
+        //   pageSize,
+        //   isPage: true,
+        //   type: "ORG_PARAM",
+        // });
         const { code, msg, rows, total } = await list(this.api, {
           ...prop,
           pageNum,

src/views/common-dialog/utils/init-something.js

@@ -1,18 +1,3 @@
-import { arr2obj } from "./data-transform";
+import { arr2obj } from "@/utils/data-transform";
 
 export const initParams = (arr) => arr2obj(arr, "key", "value");
-
-export const initComponents = (arr) =>
-  arr2obj(
-    arr
-      .filter((column) => column.config && column.config.componentName)
-      .map((column) => ({
-        name: column.config.componentName,
-        function: () =>
-          import(
-            `@/views/common-dialog/${column.config.componentName.toLocaleLowerCase()}.vue`
-          ),
-      })),
-    "name",
-    "function"
-  );

src/views/purchase/purchase-contract/add-purchase-contract.vue

@@ -1,48 +1,24 @@
 <script>
 import { add } from "@/api/business/purchase/purchase-contract";
-import { arr2obj } from "./hooks";
+import { arr2obj } from "@/utils/data-transform";
 import {
   initDicts,
   initRules,
   initParams,
-  initColumns,
-  initTabColumns,
   initComponents,
-} from "./config/add";
-// import { initComponents } from "@/views/common-dialog/utils/init-something";
+} from "@/utils/init-something";
+import { initColumns } from "./config/add";
 
 export default {
   name: "AddPurchaseContractDrawer",
   components: initComponents(initColumns()),
-  dicts: initDicts(),
+  dicts: initDicts(initColumns()),
   data() {
     return {
       visible: true,
       columns: initColumns(),
-      rules: initRules(),
-      params: initParams(),
-      options: [
-        {
-          value: "选项1",
-          label: "黄金糕",
-        },
-        {
-          value: "选项2",
-          label: "双皮奶",
-        },
-        {
-          value: "选项3",
-          label: "蚵仔煎",
-        },
-        {
-          value: "选项4",
-          label: "龙须面",
-        },
-        {
-          value: "选项5",
-          label: "北京烤鸭",
-        },
-      ],
+      rules: initRules(initColumns()),
+      params: initParams(initColumns()),
       tabColumns: initTabColumns(),
       tabName: "first",
       tabTableDatas: {
@@ -67,6 +43,7 @@ export default {
     setVisible(prop) {
       this.visible = prop;
     },
+    addTableRow() {},
     cancel() {
       this.setVisible(false);
       this.params = arr2obj(this.columns, "key", "value");
@@ -86,6 +63,7 @@ export default {
         this.setVisible(false);
       }
     },
+    //
     openAsyncInputDialog(prop, type) {
       try {
         const {
@@ -329,7 +307,7 @@ export default {
         </el-tab-pane>
       </el-tabs>
       <el-row style="position: absolute; top: 20px; right: 20px">
-        <el-button size="mini">增行</el-button>
+        <el-button size="mini" @click="addTableRow">增行</el-button>
       </el-row>
     </el-card>
   </el-drawer>

src/views/purchase/purchase-contract/config/add.js

@@ -1,5 +1,3 @@
-import { arr2obj } from "../hooks";
-
 const columns = [
   {
     key: "puOrg",
@@ -323,26 +321,6 @@ const columns = [
 
 export const initColumns = () => columns;
 
-export const initDicts = () =>
-  initColumns()
-    .filter((column) => column.type === "Select")
-    .map((column) => column.config.optionsName);
-
-export const initRules = () => {
-  const rules = {};
-  initColumns()
-    .filter((column) => column.require)
-    .forEach((column) => {
-      const message = `${column.title}不能为空`;
-      rules[column.key] = [
-        { required: true, message: message, trigger: "change" },
-      ];
-    });
-  return rules;
-};
-
-export const initParams = () => arr2obj(initColumns(), "key", "value");
-
 const tabColumns = [
   {
     title: "物料基本信息",
@@ -421,22 +399,3 @@ const tabColumns = [
   },
 ];
 export const initTabColumns = () => tabColumns;
-
-// 初始化公用组件
-import {
-  User,
-  Organization,
-  Department,
-  Supplier,
-  Tax,
-  Currency,
-} from "../../../common-dialog";
-
-export const initComponents = () => ({
-  User,
-  Organization,
-  Department,
-  Supplier,
-  Tax,
-  Currency,
-});

src/views/purchase/purchase-contract/hooks.js

@@ -1,12 +0,0 @@
-export const arr2obj = (data, keyName, valueName) =>
-  Object.fromEntries(data.map((item) => [item[keyName], item[valueName]]));
-
-export const hump2Underline = (str) =>
-  str.replace(/([A-Z])/g, "_$1").toLowerCase();
-
-export const underline2Hump = (str) => {
-  for (let match of str.match(/_(.)/g)) {
-    str = str.replace(match, match.replace("_", "")).toUpperCase();
-  }
-  return str;
-};

src/views/purchase/purchase-task/add-purchase-task.vue

@@ -1,141 +1,25 @@
 <script>
+import { add } from "@/api/business/purchase/purchase-contract";
+import { arr2obj } from "@/utils/data-transform";
+import {
+  initDicts,
+  initRules,
+  initParams,
+  initComponents,
+} from "@/utils/init-something";
+import { initColumns } from "./config/add";
+
 export default {
   name: "AddPurchaseTaskDrawer",
+  // components: initComponents(initColumns()),
+  dicts: initDicts(initColumns()),
   data() {
-    const arr2Obj = function (data, keyName, valueName) {
-      return Object.fromEntries(
-        data.map((item) => [item[keyName], item[valueName]])
-      );
-    };
-    const pickerOptions = {
-      disabledDate(time) {
-        return time.getTime() > Date.now();
-      },
-      shortcuts: [
-        {
-          text: "今天",
-          onClick(picker) {
-            picker.$emit("pick", new Date());
-          },
-        },
-        {
-          text: "昨天",
-          onClick(picker) {
-            const date = new Date();
-            date.setTime(date.getTime() - 3600 * 1000 * 24);
-            picker.$emit("pick", date);
-          },
-        },
-        {
-          text: "一周前",
-          onClick(picker) {
-            const date = new Date();
-            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
-            picker.$emit("pick", date);
-          },
-        },
-      ],
-    };
-    const columns = [
-      {
-        title: "采购组织",
-        key: "puOrg",
-        type: "TagSelect",
-        value: [],
-        required: true,
-      },
-      { title: "需求来源", key: "source", type: "Input", value: "采购创建" },
-      { title: "采购员", key: "buyer", value: [], type: "TagSelect" },
-      { title: "交易类型", key: "billYpe", value: [], type: "TagSelect" },
-      { title: "物料编码", key: "material", type: "Input", required: true },
-      {
-        title: "物料名称",
-        key: "materialName",
-        type: "TagSelect",
-        value: [],
-        required: true,
-      },
-      {
-        title: "物料/物料描述",
-        key: "materialDesc",
-        type: "TagSelect",
-        value: [],
-        required: true,
-      },
-      { title: "生产厂家", key: "manufacturer", type: "Input" },
-      { title: "收货客户", key: "customer", type: "TagSelect", value: [] },
-      {
-        title: "采购单位",
-        key: "puUnit",
-        type: "TagSelect",
-        value: [],
-        required: true,
-      },
-      {
-        title: "采购数量",
-        key: "puQty",
-        type: "InputNumber",
-        required: true,
-      },
-      {
-        title: "需求时间",
-        key: "demandDate",
-        type: "DatePicker",
-        config: { type: "date", pickerOptions: pickerOptions },
-      },
-      { title: "项目名称", key: "projectName", type: "TagSelect", value: [] },
-      { title: "需求人", key: "demandPersonal", type: "TagSelect", value: [] },
-      {
-        title: "需求组织",
-        key: "demandOrg",
-        type: "TagSelect",
-        value: [],
-        require: true,
-      },
-      { title: "需求部门", key: "demandDept", type: "TagSelect", value: [] },
-      { title: "建议供应商", key: "supplier", type: "TagSelect", value: [] },
-      { title: "收货人", key: "a", type: "TagSelect", value: [] },
-      { title: "收货组织", key: "b", type: "TagSelect", value: [] },
-      { title: "收货人联系方式", key: "c", type: "Input" },
-      { title: "收货地址", key: "d", type: "Input" },
-      { title: "收货仓库", key: "e", type: "TagSelect", value: [] },
-      {
-        title: "指定供应商",
-        key: "assignSupplier",
-        type: "TagSelect",
-        value: [],
-      },
-      { title: "单位", key: "unit", type: "TagSelect", value: [] },
-      { title: "收货地址", key: "f", type: "TagSelect", value: [] },
-    ];
-    const initColumns = () => columns;
-    const initParams = () => arr2Obj(initColumns(), "key", "value");
     return {
       visible: false,
       columns: initColumns(),
-      params: initParams(),
-      options: [
-        {
-          value: "选项1",
-          label: "黄金糕",
-        },
-        {
-          value: "选项2",
-          label: "双皮奶",
-        },
-        {
-          value: "选项3",
-          label: "蚵仔煎",
-        },
-        {
-          value: "选项4",
-          label: "龙须面",
-        },
-        {
-          value: "选项5",
-          label: "北京烤鸭",
-        },
-      ],
+      rules: initRules(initColumns()),
+      params: initParams(initColumns()),
+      currentComponent: { name: "", title: "", value: "", row: {} },
     };
   },
   computed: {},
@@ -144,6 +28,40 @@ export default {
     setVisible(prop) {
       this.visible = prop;
     },
+    //
+    openAsyncInputDialog(prop, type) {
+      try {
+        const {
+          key,
+          title,
+          config: { componentName },
+        } = prop;
+        this.currentComponent.row = prop;
+        this.currentComponent.title = title;
+        this.currentComponent.name = componentName;
+        if (type === "change") {
+          this.currentComponent.value = this.params[key];
+        }
+        if (type === "click") {
+          this.currentComponent.value = "";
+        }
+        this.$nextTick(() => {
+          const { setVisible } = this.$refs[componentName];
+          setVisible(true);
+        });
+      } catch (err) {
+        this.$notify.error({ title: "error", message: err });
+      } finally {
+      }
+    },
+    updateParams(prop) {
+      const {
+        config: { dataMapping },
+      } = this.currentComponent.row;
+      for (let key in dataMapping) {
+        this.params[key] = prop[dataMapping[key]];
+      }
+    },
   },
   created() {
     console.log(this.params);
@@ -154,104 +72,178 @@ export default {
 </script>
 <template>
   <el-drawer
-    title="我是标题"
     direction="btt"
     size="100%"
     :with-header="false"
     :visible.sync="visible"
-    :before-close="handleClose"
+    @open="beforeOpen"
   >
-    <el-form
-      size="mini"
-      label-position="right"
-      label-width="125px"
-      :model="params"
+    <el-card
+      :body-style="{
+        padding: '20px',
+        display: 'flex',
+        'flex-wrap': 'wrap',
+      }"
+      style="margin: 10px"
     >
-      <el-card
-        :body-style="{
-          padding: '20px',
-          display: 'flex',
-          'flex-wrap': 'wrap',
-        }"
-        style="margin: 10px"
-      >
-        <el-form-item
-          v-for="(column, index) in columns"
-          :key="index"
-          :prop="column.key"
-          :label="column.title"
-          :required="column.required"
-          style="width: 33%"
-        >
-          <el-input
-            v-if="column.type === 'Input'"
-            v-model="params[column.key]"
-            :placeholder="column.placeholder"
-            style="width: 90%"
-          ></el-input>
-          <el-input-number
-            v-if="column.type === 'InputNumber'"
-            v-model="params[column.key]"
-            controls-position="right"
-            :placeholder="column.placeholder"
-            style="width: 90%"
-          ></el-input-number>
-          <el-select
-            v-if="column.type === 'TagSelect'"
-            v-model="params[column.key]"
-            multiple
-            clearable
-            collapse-tags
-            :placeholder="column.placeholder"
-            style="width: 90%"
-          >
-            <template #prefix>
-              <el-icon
-                class="el-icon-s-operation"
-                style="cursor: pointer"
-                @click.stop="$message.info(234)"
-              ></el-icon>
-            </template>
-            <el-option
-              v-for="item in options"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-            >
-            </el-option>
-          </el-select>
-          <el-date-picker
-            v-if="column.type === 'DatePicker'"
-            v-model="params[column.key]"
-            :type="column.config.type"
-            :placeholder="column.placeholder"
-            :picker-options="column.pickerOptions"
-            style="width: 90%"
-          >
-          </el-date-picker>
-        </el-form-item>
-      </el-card>
-      <el-card
-        :body-style="{
-          'text-align': 'right',
-          padding: '10px 20px',
-        }"
+      <div
+        slot="header"
         style="
-          position: fixed;
-          left: 0;
-          bottom: 0;
-          margin: 10px;
-          width: calc(100% - 20px);
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
         "
       >
-        <el-button size="mini" @click="setVisible(false)">取消</el-button>
-        <el-button size="mini" type="info" @click="setVisible(false)"
-          >保存并新增</el-button
+        <h3>新增</h3>
+        <div style="text-align: right">
+          <el-button size="mini" @click="cancel">取消</el-button>
+          <el-button size="mini" type="danger" @click="sava">保存</el-button>
+          <el-button size="mini" type="info" @click="submitSava">
+            保存并新增
+          </el-button>
+        </div>
+      </div>
+      <component
+        v-if="currentComponent.name"
+        :is="currentComponent.name"
+        :ref="currentComponent.name"
+        :title="currentComponent.title"
+        :value="currentComponent.value"
+        @confirm="updateParams"
+      ></component>
+      <el-row>
+        <el-form
+          size="mini"
+          label-position="right"
+          label-width="135px"
+          :model="params"
+          :rules="rules"
         >
-        <el-button size="mini" type="danger" @click="setVisible(false)"
-          >保存</el-button
-        >
-      </el-card>
-    </el-form>
+          <el-col
+            v-for="(column, index) in columns"
+            :key="index"
+            :span="column.span || 6"
+          >
+            <el-form-item :prop="column.key" :label="column.title">
+              <el-input
+                v-if="column.type === 'Input'"
+                v-model="params[column.key]"
+                :placeholder="column.placeholder"
+                :clearable="column.clearable"
+                :disabled="column.disabled"
+                style="width: 100%"
+              ></el-input>
+              <el-input
+                v-if="column.type === 'InputDialog'"
+                v-model="params[column.key]"
+                :placeholder="column.placeholder"
+                :clearable="column.clearable"
+                :disabled="column.disabled"
+                style="width: 100%"
+                @blur="openAsyncInputDialog(column, 'change')"
+                @change="openAsyncInputDialog(column, 'change')"
+              >
+                <template #suffix>
+                  <el-icon
+                    class="el-icon-s-operation"
+                    style="cursor: pointer"
+                    @click.native.stop="openAsyncInputDialog(column, 'click')"
+                  ></el-icon>
+                </template>
+              </el-input>
+              <el-input
+                v-if="column.type === 'Textarea'"
+                v-model="params[column.key]"
+                type="textarea"
+                :placeholder="column.placeholder"
+                :clearable="column.clearable"
+                :disabled="column.disabled"
+                style="width: 100%"
+              ></el-input>
+              <el-input-number
+                v-if="column.type === 'InputNumber'"
+                v-model="params[column.key]"
+                :controls-position="
+                  column.config && column.config.controlsPosition
+                "
+                :placeholder="column.placeholder"
+                :clearable="column.clearable"
+                :disabled="column.disabled"
+                style="width: 100%"
+              ></el-input-number>
+              <el-select
+                v-if="column.type === 'Select'"
+                v-model="params[column.key]"
+                :placeholder="column.placeholder"
+                :clearable="column.clearable"
+                :disabled="column.disabled"
+                style="width: 100%"
+              >
+                <el-option
+                  v-for="item in dict.type[column.config.optionsName]"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                >
+                </el-option>
+              </el-select>
+              <el-select
+                v-if="column.type === 'TagSelect'"
+                v-model="params[column.key]"
+                multiple
+                clearable
+                collapse-tags
+                :placeholder="column.placeholder"
+                :clearable="column.clearable"
+                :disabled="column.disabled"
+                style="width: 100%"
+              >
+                <template #prefix>
+                  <el-icon
+                    class="el-icon-s-operation"
+                    style="cursor: pointer"
+                    @click.stop="$message.info(234)"
+                  ></el-icon>
+                </template>
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                >
+                </el-option>
+              </el-select>
+              <el-date-picker
+                v-if="column.type === 'DatePicker'"
+                v-model="params[column.key]"
+                :type="column.config.type"
+                :placeholder="column.placeholder"
+                :clearable="column.clearable"
+                :disabled="column.disabled"
+                :picker-options="column.pickerOptions"
+                style="width: 100%"
+              >
+              </el-date-picker>
+              <el-upload
+                v-if="column.type === 'Upload'"
+                :file-list="params[column.key]"
+                :disabled="column.disabled"
+                drag
+                action="https://jsonplaceholder.typicode.com/posts/"
+                multiple
+              >
+                <i class="el-icon-upload"></i>
+                <div class="el-upload__text">
+                  将文件拖到此处，或<em>点击上传</em>
+                </div>
+                <div class="el-upload__tip" slot="tip">
+                  只能上传jpg/png文件，且不超过500kb
+                </div>
+              </el-upload>
+            </el-form-item>
+          </el-col>
+        </el-form>
+      </el-row>
+    </el-card>
   </el-drawer>
 </template>

src/views/purchase/purchase-task/config/add.js

@@ -0,0 +1,105 @@
+const pickerOptions = {
+  disabledDate(time) {
+    return time.getTime() > Date.now();
+  },
+  shortcuts: [
+    {
+      text: "今天",
+      onClick(picker) {
+        picker.$emit("pick", new Date());
+      },
+    },
+    {
+      text: "昨天",
+      onClick(picker) {
+        const date = new Date();
+        date.setTime(date.getTime() - 3600 * 1000 * 24);
+        picker.$emit("pick", date);
+      },
+    },
+    {
+      text: "一周前",
+      onClick(picker) {
+        const date = new Date();
+        date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
+        picker.$emit("pick", date);
+      },
+    },
+  ],
+};
+
+const columns = [
+  {
+    title: "采购组织",
+    key: "puOrg",
+    type: "InputDialog",
+    value: [],
+    required: true,
+  },
+  { title: "需求来源", key: "source", type: "Input", value: "采购创建" },
+  { title: "采购员", key: "buyer", value: [], type: "InputDialog" },
+  { title: "交易类型", key: "billYpe", value: [], type: "InputDialog" },
+  { title: "物料编码", key: "material", type: "Input", required: true },
+  {
+    title: "物料名称",
+    key: "materialName",
+    type: "InputDialog",
+    value: [],
+    required: true,
+  },
+  {
+    title: "物料/物料描述",
+    key: "materialDesc",
+    type: "InputDialog",
+    value: [],
+    required: true,
+  },
+  { title: "生产厂家", key: "manufacturer", type: "Input" },
+  { title: "收货客户", key: "customer", type: "InputDialog", value: [] },
+  {
+    title: "采购单位",
+    key: "puUnit",
+    type: "InputDialog",
+    value: [],
+    required: true,
+  },
+  {
+    title: "采购数量",
+    key: "puQty",
+    type: "InputNumber",
+    required: true,
+  },
+  {
+    title: "需求时间",
+    key: "demandDate",
+    type: "DatePicker",
+    config: { type: "date", pickerOptions: pickerOptions },
+  },
+  { title: "项目名称", key: "projectName", type: "InputDialog", value: [] },
+  { title: "需求人", key: "demandPersonal", type: "InputDialog", value: [] },
+  {
+    title: "需求组织",
+    key: "demandOrg",
+    type: "InputDialog",
+    value: [],
+    require: true,
+  },
+  { title: "需求部门", key: "demandDept", type: "InputDialog", value: [] },
+  { title: "建议供应商", key: "supplier", type: "InputDialog", value: [] },
+  { title: "收货人", key: "a", type: "InputDialog", value: [] },
+  { title: "收货组织", key: "b", type: "InputDialog", value: [] },
+  { title: "收货人联系方式", key: "c", type: "Input" },
+  { title: "收货地址", key: "d", type: "Input" },
+  { title: "收货仓库", key: "e", type: "InputDialog", value: [] },
+  {
+    title: "指定供应商",
+    key: "assignSupplier",
+    type: "InputDialog",
+    value: [],
+  },
+  { title: "单位", key: "unit", type: "InputDialog", value: [] },
+  { title: "收货地址", key: "f", type: "InputDialog", value: [] },
+];
+
+export const initColumns = () => columns;
+

src/views/purchase/purchase-task/index.vue

@@ -401,12 +401,12 @@ export default {
         title: this.isSimpleSearch ? "Simple Search" : "All Search",
       });
     },
-    handleSizeChange() { },
-    handleCurrentChange() { },
+    handleSizeChange() {},
+    handleCurrentChange() {},
     handleOpenAddDrawer() {
       const { setVisible } = this.$refs.addDrawerFef;
-      setVisible(true);
       setTimeout(() => {
+        setVisible(true);
         this.$notify.info("Open Add Drawer");
       }, 250);
     },
@@ -422,16 +422,37 @@ export default {
 </script>
 
 <template>
-  <el-card v-loading="loading" style="width: calc(100% - 24px); height: 100%; margin: 10px" :body-style="{ padding: 0 }">
+  <el-card
+    v-loading="loading"
+    style="width: calc(100% - 24px); height: 100%; margin: 10px"
+    :body-style="{ padding: 0 }"
+  >
     <AddPurchaseTaskDrawer ref="addDrawerFef"></AddPurchaseTaskDrawer>
     <SeePurchaseTaskDrawer ref="seeDrawerFef"></SeePurchaseTaskDrawer>
-    <el-form size="mini" label-position="right" label-width="85px" :model="searchParams" style="padding: 20px 0 0 0">
+    <el-form
+      size="mini"
+      label-position="right"
+      label-width="85px"
+      :model="searchParams"
+      style="padding: 20px 0 0 0"
+    >
       <el-row :gutter="24">
         <el-col :span="22">
           <el-row :gutter="20">
-            <el-col v-for="column in showSearchColumns" :key="column.title" :xl="6" :lg="6" :md="8" :sm="12" :xs="24">
+            <el-col
+              v-for="column in showSearchColumns"
+              :key="column.title"
+              :xl="6"
+              :lg="6"
+              :md="8"
+              :sm="12"
+              :xs="24"
+            >
               <el-form-item :prop="column.key" :label="column.title">
-                <el-input v-model="searchParams[column.key]" :placeholder="column.placeholder"></el-input>
+                <el-input
+                  v-model="searchParams[column.key]"
+                  :placeholder="column.placeholder"
+                ></el-input>
               </el-form-item>
             </el-col>
           </el-row>
@@ -441,7 +462,11 @@ export default {
             <el-col :span="24">
               <el-button type="primary" size="mini">搜索</el-button>
             </el-col>
-            <el-col v-show="!isSimpleSearch" :span="24" style="margin: 10px 0 0">
+            <el-col
+              v-show="!isSimpleSearch"
+              :span="24"
+              style="margin: 10px 0 0"
+            >
               <el-button size="mini">重置</el-button>
             </el-col>
           </el-row>
@@ -449,13 +474,21 @@ export default {
       </el-row>
     </el-form>
     <el-divider>
-      <i :class="isSimpleSearch ? 'el-icon-arrow-down' : 'el-icon-arrow-up'" style="cursor: pointer"
-        @click="handleSearchChange"></i>
+      <i
+        :class="isSimpleSearch ? 'el-icon-arrow-down' : 'el-icon-arrow-up'"
+        style="cursor: pointer"
+        @click="handleSearchChange"
+      ></i>
     </el-divider>
     <el-row :gutter="24" style="padding: 0 20px">
       <el-col :span="6">123</el-col>
       <el-col :span="18" style="text-align: right">
-        <el-button size="mini" type="danger" style="margin: 0 10px 0 0" @click="handleOpenAddDrawer">
+        <el-button
+          size="mini"
+          type="danger"
+          style="margin: 0 10px 0 0"
+          @click="handleOpenAddDrawer"
+        >
           新增
         </el-button>
         <el-dropdown placement="bottom-start">
@@ -471,7 +504,10 @@ export default {
         </el-dropdown>
 
         <el-dropdown placement="bottom-start">
-          <el-button size="mini" style="border-right: 0; border-radius: 3px 0 0 3px">
+          <el-button
+            size="mini"
+            style="border-right: 0; border-radius: 3px 0 0 3px"
+          >
             首次协议直采
             <i class="el-icon-arrow-down el-icon--right"></i>
           </el-button>
@@ -492,7 +528,10 @@ export default {
         <el-button size="mini" style="border-right: 0; border-radius: 0">
           Excel导出
         </el-button>
-        <el-button size="mini" style="margin: 0; border-right: 0; border-radius: 0">
+        <el-button
+          size="mini"
+          style="margin: 0; border-right: 0; border-radius: 0"
+        >
           退回请购
         </el-button>
         <el-dropdown placement="bottom-start">
@@ -504,7 +543,11 @@ export default {
             <el-dropdown-item>商超匹配下单</el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown>
-        <el-button size="mini" disabled style="margin: 0 10px 0 0; border-radius: 0 3px 3px 0">
+        <el-button
+          size="mini"
+          disabled
+          style="margin: 0 10px 0 0; border-radius: 0 3px 3px 0"
+        >
           一键合同下单
         </el-button>
         <el-button size="mini" style="margin: 0 10px 0 0">删除</el-button>
@@ -523,14 +566,32 @@ export default {
         </el-dropdown>
       </el-col>
     </el-row>
-    <el-table @row-dblclick="handleOpenSeeDrawer" :data="tableData" size="mini" style="width: 100%; margin: 20px 0 0 0">
-      <el-table-column v-for="(column, index) in tableColumns" :key="index" :prop="column.key" :label="column.title"
-        :width="column.width || 180" :show-overflow-tooltip="column.showOverflowTooltip || true">
+    <el-table
+      @row-dblclick="handleOpenSeeDrawer"
+      :data="tableData"
+      size="mini"
+      style="width: 100%; margin: 20px 0 0 0"
+    >
+      <el-table-column
+        v-for="(column, index) in tableColumns"
+        :key="index"
+        :prop="column.key"
+        :label="column.title"
+        :width="column.width || 180"
+        :show-overflow-tooltip="column.showOverflowTooltip || true"
+      >
       </el-table-column>
     </el-table>
-    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :total="total"
-      :page-sizes="pageSizes" :page-size="page.pageSize" :current-page="page.pageNum" hide-on-single-page
-      layout="total, prev, pager, next, sizes, jumper">
+    <el-pagination
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+      :total="total"
+      :page-sizes="pageSizes"
+      :page-size="page.pageSize"
+      :current-page="page.pageNum"
+      hide-on-single-page
+      layout="total, prev, pager, next, sizes, jumper"
+    >
     </el-pagination>
     <DirectSourcingTable></DirectSourcingTable>
   </el-card>