物料分类分工表-列表详情组件优化，UI优化；解决新增、编辑字段保存无效问题；

src/views/purchase/MaterialClassDivision/columns.js

@@ -0,0 +1,210 @@
+export default function useColumns() {
+  const SearchColumns = [
+    {
+      item: { key: "materialClassifyOne", title: "物料一级大类编码" },
+      attr: {
+        is: "el-input",
+        clearable: true,
+      },
+    },
+    {
+      item: { key: "materialClassifyOneName", title: "物料一级大类名称" },
+      attr: {
+        is: "el-input",
+        clearable: true,
+      },
+    },
+    {
+      item: { key: "materialClassifyTwo", title: "物料二级大类编码" },
+      attr: {
+        is: "el-input",
+        clearable: true,
+      },
+    },
+    {
+      item: { key: "materialClassifyTwoName", title: "物料二级大类名称" },
+      attr: {
+        is: "el-input",
+        clearable: true,
+      },
+    },
+    {
+      item: { key: "materialClassifyThree", title: "物料三级大类编码" },
+      attr: {
+        is: "el-input",
+        clearable: true,
+      },
+    },
+    {
+      item: { key: "materialClassifyThreeName", title: "物料三级大类名称" },
+      attr: {
+        is: "el-input",
+        clearable: true,
+      },
+    },
+    {
+      item: { key: "materialClassify", title: "物料四级大类编码" },
+      attr: {
+        // is: "el-popover-multiple-tree-select",
+        is: "el-popover-tree-select",
+        referName: "MATERIALCLASSIFY_PARAM",
+        valueKey: "code",
+        clearable: true,
+        // 末级
+        onlyFinal: true,
+        readonly: true,
+        defaultProps: {
+          label: function (data, node) {
+            return data.code + " " + data.name;
+          },
+          children: "children",
+        },
+      },
+    },
+    {
+      item: { key: "materialClassifyFourName", title: "物料四级大类名称" },
+      attr: {
+        is: "el-input",
+        clearable: true,
+      },
+    },
+    {
+      item: { key: "materialCode", title: "物料编码" },
+      attr: {
+        is: "el-popover-select-v2",
+        referName: "MATERIAL_PARAM",
+        valueKey: "code",
+        clearable: true,
+        dataMapping: {
+          materialName: "name",
+        },
+      },
+    },
+    {
+      item: { key: "materialName", title: "物料名称" },
+      attr: {
+        is: "el-input",
+        clearable: true,
+      },
+    },
+    {
+      item: { key: "orderPersonalName", title: "订单员" },
+      attr: {
+        is: "el-popover-select-v2",
+        referName: "CONTACTS_PARAM",
+        valueKey: "name",
+        dataMapping: {
+          orderPersonal: "code"
+        }
+      },
+    },
+    {
+      item: { key: "buyerName", title: "采购员" },
+      attr: {
+        is: "el-popover-select-v2",
+        referName: "CONTACTS_PARAM",
+        valueKey: "name",
+        dataMapping: {
+          buyer: 'code',
+        },
+      },
+    },
+    {
+      item: { key: "manufacturer", title: "生产厂家" },
+      attr: {
+        is: "el-input",
+        clearable: true,
+      },
+    },
+    {
+      item: { key: "remark", title: "备注" },
+      attr: {
+        is: "el-input",
+        clearable: true,
+      },
+    },
+  ];
+
+  const TableColumns = [
+    {
+      item: { key: "materialClassify", title: "物料分类编码", width: 120, },
+      attr: {}
+    },
+    {
+      item: { key: "materialClassifyOneName", title: "一级分类名称", width: 120, },
+      attr: {}
+    },
+    {
+      item: { key: "materialClassifyTwoName", title: "二级分类名称", width: 120, },
+      attr: {}
+    },
+    {
+      item: { key: "materialClassifyThreeName", title: "三级分类名称", width: 120, },
+      attr: {}
+    },
+    {
+      item: { key: "materialClassifyFourName", title: "四级分类名称", },
+      attr: {}
+    },
+    {
+      item: { key: "materialCode", title: "物料编码", },
+      attr: {}
+    },
+    {
+      item: { key: "materialName", title: "物料名称", },
+      attr: {}
+    },
+    {
+      item: { key: "manufacturer", title: "生产厂商", },
+      attr: {}
+    },
+    {
+      item: { key: "orgName", title: "所属组织", },
+      attr: {}
+    },
+    {
+      item: { key: "orderPersonalName", title: "订单员", width: 120, },
+      attr: {}
+    },
+    {
+      item: { key: "buyerName", title: "采购员", width: 120, },
+      attr: {}
+    },
+    {
+      item: { key: "orderDeptName", title: "订单部门", },
+      attr: {}
+    },
+    {
+      item: { key: "puDeptName", title: "部门", },
+      attr: {}
+    },
+    {
+      item: { key: "createByName", title: "创建人", width: 120, },
+      attr: {}
+    },
+    {
+      item: { key: "createTime", title: "创建时间", },
+      attr: {}
+    },
+    {
+      item: { key: "updateByName", title: "修改人", width: 120, },
+      attr: {}
+    },
+    {
+      item: { key: "updateTime", title: "修改时间", },
+      attr: {}
+    },
+  ].map(({ item, attr }) => ({
+    attr,
+    item: {
+      ...item,
+      width: item.width || 150,
+      sortabled: true,
+      fixedabled: true,
+      filterabled: true,
+      hiddenabled: true,
+    },
+  }));
+
+  return { SearchColumns, TableColumns };
+}

src/views/purchase/MaterialClassDivision/details/columns.js

@@ -0,0 +1,177 @@
+
+export default function Columns() {
+  const FormColumns = [
+    {
+      item: { key: "materialClassify", title: "物料分类编码" },
+      attr: {
+        is: "el-popover-tree-select",
+        referName: "MATERIALCLASSIFY_PARAM",
+        valueKey: "code",
+        clearable: true,
+        // 末级
+        onlyFinal: true,
+        readonly: true,
+        defaultProps: {
+          label: function (data, node) {
+            return data.code + " " + data.name;
+          },
+          children: "children",
+        },
+        dataMapping: {
+          materialClassifyName: "name",
+        }
+      },
+    },
+    {
+      item: { key: "materialClassifyName", title: "物料分类名称" },
+      attr: {
+        is: "el-input",
+        clearable: true,
+        disabled: true,
+      },
+    },
+    {
+      item: { key: "materialClassifyOne", title: "一级分类编码" },
+      attr: {
+        is: "el-input",
+        clearable: true,
+        disabled: true,
+      },
+    },
+    {
+      item: { key: "materialClassifyOneName", title: "一级分类名称" },
+      attr: {
+        is: "el-input",
+        clearable: true,
+        disabled: true,
+      },
+    },
+    {
+      item: { key: "materialClassifyTwoName", title: "二级分类名称" },
+      attr: {
+        is: "el-input",
+        clearable: true,
+        disabled: true,
+      },
+    },
+    {
+      item: { key: "materialClassifyThreeName", title: "三级分类名称" },
+      attr: {
+        is: "el-input",
+        clearable: true,
+        disabled: true,
+      },
+    },
+    {
+      item: { key: "materialClassifyFourName", title: "四级分类名称" },
+      attr: {
+        is: "el-input",
+        clearable: true,
+        disabled: true,
+      },
+    },
+    {
+      item: { key: "materialCode", title: "物料编码" },
+      attr: {
+        is: "el-popover-select-v2",
+        valueKey: "code",
+        referName: "MATERIAL_PARAM",
+        dataMapping: {
+          materialName: "name",
+        },
+        clearable: true,
+        readonly: true,
+      },
+    },
+    {
+      item: { key: "materialName", title: "物料名称" },
+      attr: {
+        is: "el-input",
+        clearable: true,
+        disabled: true,
+      },
+    },
+    {
+      item: { key: "manufacturer", title: "生产厂家" },
+      attr: {
+        is: "el-input",
+        clearable: true,
+      },
+    },
+    {
+      item: { key: "orgName", title: "所属组织" },
+      attr: {
+        is: "el-popover-select-v2",
+        referName: "ORG_PARAM",
+        valueKey: "name",
+        dataMapping: {
+          org: "code"
+        }
+      },
+    },
+    {
+      item: { key: "orderPersonalName", title: "订单员" },
+      attr: {
+        is: "el-popover-select-v2",
+        referName: "CONTACTS_PARAM",
+        valueKey: "name",
+        dataMapping: {
+          orderPersonal: "code",
+          orderDeptName: "deptName",
+          orderDept: "deptId",
+        }
+      },
+    },
+    {
+      item: { key: "orderDeptName", title: "订单部门" },
+      attr: {
+        is: "el-input",
+        clearable: true,
+        disabled: true,
+      },
+    },
+    {
+      item: { key: "buyerName", title: "采购员" },
+      attr: {
+        is: "el-popover-select-v2",
+        referName: "CONTACTS_PARAM",
+        valueKey: "name",
+        dataMapping: {
+          buyer: 'code',
+          puDeptName: "deptName",
+          puDept: "deptId",
+        },
+      },
+    },
+    {
+      item: { key: "puDeptName", title: "采购部门" },
+      attr: {
+        is: "el-input",
+        clearable: true,
+        disabled: true,
+      },
+    },
+    {
+      item: { key: "sendStatus", title: "同步状态" },
+      attr: {
+        is: "el-select",
+        dictName: "synch_state",
+        clearable: true,
+        disabled: true,
+      },
+    },
+    {
+      item: { key: "remark", title: "备注" },
+      attr: {
+        is: "el-input",
+        clearable: true,
+      },
+    },
+
+  ].map(({ item, attr }) => ({
+    attr,
+    item: { ...item, hidden: true, span: item.span || 6 },
+  }));
+
+  return { FormColumns };
+};

src/views/purchase/MaterialClassDivision/details/index.vue

@@ -0,0 +1,194 @@
+<script>
+import Columns from "./columns";
+import {
+  addDivision,
+  getDivisions,
+  editDivision,
+} from "@/api/purchase/basic.js";
+// 调用物料分类详情接口用于数据回显
+import { getDetail } from "@/api/classify/basic";
+export default {
+  name: "Division",
+  props: {
+    dict: {
+      type: Object,
+    },
+  },
+  components: {
+    ElSuperForm: () => import("@/components/super-form/index.vue"),
+    ElPopoverTreeSelect: () =>
+      import("@/components/popover-tree-select/index.vue"),
+  },
+  data() {
+    const { FormColumns } = Columns();
+    const params = this.$init.params(FormColumns);
+    const rules = this.$init.rules(FormColumns);
+    // FormColumns.forEach(({ item, attr: { dataMapping } }) => {
+    //   if (dataMapping) {
+    //     for (const key in dataMapping) {
+    //       if (Object.hasOwnProperty.call(dataMapping, key)) {
+    //         params[key] = "";
+    //       }
+    //     }
+    //   }
+    // });
+    return {
+      rules,
+      params,
+      width: "100%",
+      visible: false,
+      loading: false,
+      FormColumns: FormColumns,
+      pageStu: "add",
+    };
+  },
+  computed: {
+    title: {
+      get() {
+        return "新增";
+      },
+      set() {},
+    },
+  },
+  methods: {
+    setStatus(prop, status) {
+      this.visible = prop;
+      this.pageStu = status;
+    },
+    // 打开前
+    beforeOpen() {},
+    // 详情
+    async fetchItem(prop) {
+      try {
+        // try
+        this.loading = true;
+
+        let { code, data } = await getDivisions(prop.id);
+
+        if (code == 200) {
+          this.params = data;
+        }
+      } catch (err) {
+        // catch
+        console.error(err);
+      } finally {
+        // finally
+        this.loading = false;
+      }
+    },
+
+    // 关闭
+    hide() {
+      this.visible = false;
+      this.$emit("success");
+      this.params = this.$init.params(this.FormColumns);
+    },
+    // 保存
+    async useSave() {
+      try {
+        let { params, pageStu } = this;
+        this.$modal.loading("保存中...");
+        let { code, msg } =
+          pageStu === "edit"
+            ? await editDivision(params)
+            : await addDivision(params);
+
+        if (code == 200) {
+          this.$notify.success(msg);
+          this.hide();
+        }
+      } catch (error) {
+      } finally {
+        this.$modal.closeLoading();
+      }
+    },
+    // 编辑
+    useEdit() {
+      this.pageStu = "edit";
+    },
+    // 物料分类
+    async materialClassifyChange(prop) {
+      console.log(prop, "prop");
+      try {
+        let id = prop[0] ? prop[0].id : "";
+        let {
+          code,
+          data: { oneClass, twoClass, threeClass, fourClass },
+        } = await getDetail(id);
+        if (code == 200) {
+          this.params.materialClassifyOneName = oneClass;
+          this.params.materialClassifyTwoName = twoClass;
+          this.params.materialClassifyThreeName = threeClass;
+          this.params.materialClassifyFourName = fourClass;
+        }
+      } catch (error) {}
+    },
+  },
+  created() {},
+};
+</script>
+
+<template>
+  <el-drawer
+    v-bind="$attrs"
+    v-on="$listeners"
+    :size="width"
+    :visible.sync="visible"
+    destroy-on-close
+    :show-close="false"
+    @close="hide"
+    @open="beforeOpen"
+    v-loading="loading"
+  >
+    <div
+      slot="title"
+      style="display: flex; justify-content: space-between; align-items: center"
+    >
+      <h3>{{ title }}</h3>
+      <div>
+        <el-button
+          type="primary"
+          :size="$attrs.size"
+          :loading="loading"
+          @click="useSave('superForm')"
+          v-if="pageStu !== 'see'"
+          >保 存</el-button
+        >
+        <el-button
+          type="primary"
+          :size="$attrs.size"
+          :loading="loading"
+          @click="useEdit"
+          v-if="pageStu === 'see'"
+          >编 辑</el-button
+        >
+        <el-button :size="$attrs.size" :loading="loading" @click="hide"
+          >取 消</el-button
+        >
+      </div>
+    </div>
+    <el-super-form
+      v-model="params"
+      :dict="dict"
+      :rules="rules"
+      :size="$attrs.size"
+      :columns="FormColumns"
+      :disabled="pageStu === 'see'"
+      ref="superForm"
+      label-width="auto"
+      label-position="right"
+      style="padding: 20px"
+    >
+      <template slot="materialClassify" slot-scope="scope">
+        <component
+          v-bind="scope.attr"
+          v-model="scope.row[scope.item.key]"
+          :size="$attrs.size"
+          :source.sync="scope.row"
+          @change="materialClassifyChange"
+        >
+        </component
+      ></template>
+    </el-super-form>
+  </el-drawer>
+</template>

src/views/purchase/MaterialClassDivision/dicts.js

@@ -0,0 +1,14 @@
+import { initDicts } from "@/utils/init.js";
+const modules = require.context("./", true, /columns.js$/);
+const columns = [];
+modules.keys().forEach((fileName) => {
+  const data = modules(fileName).default();
+  for (const key in data) {
+    if (key === "TabColumns") {
+      columns.push(...data[key].map((item) => item.TableColumns).flat());
+    } else {
+      columns.push(...data[key]);
+    }
+  }
+});
+export const dicts = initDicts(columns);

src/views/purchase/MaterialClassDivision/index copy.vue

@@ -0,0 +1,533 @@
+<template>
+  <div id="MaterialClassDivision">
+    <div v-if="isList">
+      <el-card style="position: relative;">
+      <el-form class="search_area" label-width="130px">
+        <el-row :gutter="10">
+          <el-col :span="1.5">
+            <el-form-item label="物料一级大类编码">
+              <el-input
+                v-model="queryParams.materialClassifyOne"
+                clearable
+                size="mini"
+                style="width: 200px"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="1.5">
+            <el-form-item label="物料一级大类名称">
+              <el-input
+                v-model="queryParams.materialClassifyOneName"
+                clearable
+                size="mini"
+                style="width: 200px"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="1.5">
+            <el-form-item label="物料二级大类编码">
+              <el-input
+                v-model="queryParams.materialClassifyTwo"
+                clearable
+                size="mini"
+                style="width: 200px"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="1.5">
+            <el-form-item label="物料二级大类名称">
+              <el-input
+                v-model="queryParams.materialClassifyTwoName"
+                clearable
+                size="mini"
+                style="width: 200px"
+              />
+            </el-form-item>
+          </el-col>
+          <!-- <el-col :span="1.5"> -->
+            <!-- <el-form-item label="" label-width="20px"> -->
+            <div style="position: absolute;top: 3px;right: 10px;">
+              <el-button type="primary" size="mini" @click="searchList">搜索</el-button>
+              <el-button size="mini" plain @click="resetList">重置</el-button>
+            </div>
+            <!-- </el-form-item> -->
+          <!-- </el-col> -->
+        </el-row>
+
+        <CollapseTransition>
+          <div v-show="expanded">
+        <el-row :gutter="10">
+          <el-col :span="1.5">
+            <el-form-item label="物料三级大类编码">
+              <el-input
+                v-model="queryParams.materialClassifyThree"
+                clearable
+                size="mini"
+                style="width: 200px"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="1.5">
+            <el-form-item label="物料三级大类名称">
+              <el-input
+                v-model="queryParams.materialClassifyThreeName"
+                clearable
+                size="mini"
+                style="width: 200px"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="1.5">
+            <el-form-item label="物料四级大类编码">
+              <el-input size="mini" style="width: 200px" readonly v-model="queryParams.materialClassify">
+                <el-button slot="append" icon="el-icon-more" @click="chooseFourClass"></el-button>
+              </el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="1.5">
+            <el-form-item label="物料四级大类名称">
+              <el-input
+                v-model="queryParams.materialClassifyFourName"
+                clearable
+                size="mini"
+                style="width: 200px"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="10">
+          <el-col :span="1.5">
+            <el-form-item label="物料编码">
+              <el-input style="width: 200px" size="mini" readonly v-model="queryParams.materialCode">
+                  <el-button slot="append" icon="el-icon-more" @click="test01"></el-button>
+              </el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="1.5">
+            <el-form-item label="物料名称">
+              <el-input
+                v-model="queryParams.materialName"
+                clearable
+                size="mini"
+                style="width: 200px"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="1.5">
+            <el-form-item label="订单员">
+              <el-select
+                  ref="staffs"
+                  size="mini"
+                  style="width: 200px"
+                  v-model="queryParams.orderPersonal"
+                  clearable
+                  @focus="chooseRefer('CONTACTS_PARAM', true, '订单员')"
+                >
+                  <el-option
+                    v-for="item in staffOptions"
+                    :key="item.id"
+                    :label="item.name"
+                    :value="item.code"
+                  />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="1.5">
+            <el-form-item label="采购员">
+              <el-select
+                  ref="staffs2"
+                  size="mini"
+                  style="width: 200px"
+                  v-model="queryParams.buyer"
+                  clearable
+                  @focus="chooseRefer('CONTACTS_PARAM', true, '采购员')"
+                >
+                  <el-option
+                    v-for="item in staff2Options"
+                    :key="item.id"
+                    :label="item.name"
+                    :value="item.code"
+                  />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="10">
+          <el-col :span="1.5">
+            <el-form-item label="生产厂家">
+            <el-input
+              v-model="queryParams.manufacturer"
+              size="mini"
+              placeholder=""
+              clearable
+              style="width: 200px"
+            />
+            </el-form-item>
+          </el-col>
+          <el-col :span="1.5">
+            <el-form-item label="备注">
+            <el-input
+              v-model="queryParams.remark"
+              size="mini"
+              placeholder=""
+              clearable
+              style="width: 200px"
+            />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        </div>
+      </CollapseTransition>
+      </el-form>
+      <el-divider class="lines"><i style="cursor: pointer;" :class="expanded?'el-icon-arrow-up':'el-icon-arrow-down'" @click="drop"></i></el-divider>
+
+        <div class="btn_grooup">
+          <el-button type="primary" size="mini" @click="addDivision">新增</el-button>
+
+          <!-- <el-dropdown size="mini" @command="handleCommand">
+            <el-button size="mini" type="primary" style="margin-left: 10px;">
+              导入<i class="el-icon-arrow-down el-icon--right"></i>
+            </el-button>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item command="数据导入">数据导入</el-dropdown-item>
+              <el-dropdown-item command="模板下载">模板下载</el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+
+          <el-dropdown size="mini" @command="handleCommand">
+            <el-button size="mini" type="primary" style="margin: 0 10px;">
+              导出<i class="el-icon-arrow-down el-icon--right"></i>
+            </el-button>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item command="Excel导出">Excel导出</el-dropdown-item>
+              <el-dropdown-item command="导出明细">导出明细</el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown> -->
+
+          <el-button type="primary" size="mini" @click="deletes">删除</el-button>
+        </div>
+        <el-table 
+          :data="tableList" 
+          fit
+          :cell-style="{ borderColor: '#c0c0c0' }"
+          :header-cell-style="{ borderColor: '#c0c0c0' }"
+          class="exporttable"
+          border
+          height="390"
+          max-height="390"
+          style="font-size: 12px;"
+          @selection-change="handleSelectionChange"
+          @row-click="rowSelect"
+          @row-dblclick="doubleClick"
+          ref="table"
+        >
+          <el-table-column show-overflow-tooltip type="selection" width="55" fixed="left"/>
+          <el-table-column show-overflow-tooltip label="序号" type="index" align="center" width="50px" fixed="left"/>
+          <el-table-column show-overflow-tooltip label="物料分类编码" align="center" width="120" prop="materialClassify"/>
+          <!-- <el-table-column show-overflow-tooltip label="物料分类名称" align="center" width="200" prop="materialClassifyName" /> -->
+          <el-table-column show-overflow-tooltip label="一级分类名称" align="center" width="120" prop="materialClassifyOneName" />
+          <el-table-column show-overflow-tooltip label="二级分类名称" align="center" width="120" prop="materialClassifyTwoName" />
+          <el-table-column show-overflow-tooltip label="三级分类名称" align="center" width="120" prop="materialClassifyThreeName"/>
+          <el-table-column show-overflow-tooltip label="四级分类名称" align="center" width="120" prop="materialClassifyFourName" />
+          <el-table-column show-overflow-tooltip label="物料编码" align="center" width="120" prop="materialCode" />
+          <el-table-column show-overflow-tooltip label="物料名称" align="center" width="150" prop="materialName" />
+          <el-table-column show-overflow-tooltip label="生产厂商" align="center" width="150" prop="manufacturer" />
+          <el-table-column show-overflow-tooltip label="所属组织" align="center" width="200" prop="orgName"/>
+          <el-table-column show-overflow-tooltip label="订单员" align="center" width="100" prop="orderPersonalName" />
+          <el-table-column show-overflow-tooltip label="采购员" align="center" width="100" prop="buyerName" />
+          <el-table-column show-overflow-tooltip label="订单部门" align="center" width="150" prop="orderDeptName" />
+          <el-table-column show-overflow-tooltip label="部门" align="center" width="150" prop="puDeptName" />
+          <el-table-column show-overflow-tooltip label="创建人" align="center" width="100" prop="createByName" />
+          <el-table-column show-overflow-tooltip label="创建时间" align="center" width="150" prop="createTime" />
+          <el-table-column show-overflow-tooltip label="修改人" align="center" width="100" prop="updateByName" />
+          <el-table-column show-overflow-tooltip label="修改时间" align="center" width="150" prop="updateTime" />
+          <el-table-column
+          fixed="right"
+          label="操作"
+          align="center"
+          width="150"
+          >
+          <template slot-scope="scope">
+            <el-button type="text" size="mini" @click="check(scope.row)">查看</el-button>
+            <el-button type="text" size="mini" @click="edit(scope.row)">编辑</el-button>
+            <el-button type="text" size="mini" @click="deleteids(scope.row)">删除</el-button>
+          </template>
+        </el-table-column>
+        </el-table>
+
+        <el-pagination
+          background
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page="queryParams.pageNum"
+          :page-sizes="[10, 20, 50, 100, 200, 500]"
+          :page-size="10"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total=total>
+        </el-pagination>
+      </el-card>
+    </div>
+
+    <Add v-model="isList" v-if="!isList" :pageStu="page" :disable="disable" :row="rowDetail" @refresh="getList"/>
+  
+    <fourClass
+      ref="fourClass"
+      @doSubmit="acceptFourClass"
+      :single="true"
+    />
+
+    <popDialog
+      ref="contractSelect"
+      @doSubmit="selectionsToInput"
+      :single="true"
+    />
+
+    <Refers ref="refer" @doSubmit="selectionsRefer" :single="true"/>
+  </div>
+</template>
+
+<script>
+import Add from './add.vue'
+import CollapseTransition from '@/components/MyCollapse/collapse.vue'
+import {getDivisionList, delDivision} from '@/api/purchase/basic.js'
+// 物料分类
+import fourClass from '@/components/PopDialog/fourClass.vue'
+// 物料编码
+import popDialog from '@/components/PopDialog/index.vue'
+import Refers from '@/components/Refers/refers.vue'
+export default {
+  name: 'MaterialClassDivision',
+  components: {
+    Add,
+    CollapseTransition,
+    fourClass,
+    popDialog,
+    Refers
+  },
+  data() {
+    return {
+      expanded: false,
+      // 页面配置
+      isList: true,
+      // 页面状态
+      page: '',
+      queryParams: {
+        materialClassifyOne: '',
+        materialClassifyOneName: '',
+        materialClassifyTwo: '',
+        materialClassifyTwoName: '',
+        materialClassifyThree: '',
+        materialClassifyThreeName: '',
+        materialClassify: '',
+        materialClassifyFourName: '',
+        materialCode: '',
+        materialName: '',
+        orderPersonal: '',
+        buyer: '',
+        manufacturer: '',
+        remark: '',
+        pageNum: 1,
+        pageSize: 10
+      },
+      options: [{
+        value: 'Y', label: '是',
+      }, {
+        value: 'N', label: '否'
+      }],
+      staffOptions: [],
+      staff2Options: [],
+      referCondition: {
+        type: '',
+        isPage: true,
+        title: ''
+      },
+      tableList: [],
+      total: 0,
+      rowDetail: {},
+      disable: false,
+      allSelection: []
+    }
+  },
+  created() {
+    this.getList(this.queryParams)
+  },
+  methods: {
+    getList(params){
+      getDivisionList(params).then(res => {
+        if (res.code === 200) {
+          this.tableList = res.rows
+          this.total = res.total
+        }
+      })
+    },
+    searchList() {
+      this.getList(this.queryParams)
+    },
+    resetList() {
+      this.queryParams = {
+        materialClassifyOne: '',
+        materialClassifyOneName: '',
+        materialClassifyTwo: '',
+        materialClassifyTwoName: '',
+        materialClassifyThree: '',
+        materialClassifyThreeName: '',
+        materialClassify: '',
+        materialClassifyFourName: '',
+        materialCode: '',
+        materialName: '',
+        orderPersonal: '',
+        buyer: '',
+        manufacturer: '',
+        remark: '',
+        pageNum: 1,
+        pageSize: 10
+      }
+      this.getList(this.queryParams)
+    },
+    deletes() {
+      if (this.allSelection.length == 0) {
+        this.$modal.notifyWarning("请至少选择一条数据!");
+      } else {
+        let param = this.allSelection.map(item => item.id)
+        let rows = param.join()
+        
+        this.$modal.confirm('确认删除选择数据?').then(() => {
+          delDivision(rows).then(res => {
+            if (res.code === 200) {
+              this.$modal.notifySuccess("删除成功");
+              this.getList(this.queryParams)
+            }
+          })
+        }).catch(() => { })
+      }
+    },
+    handleSelectionChange(selection) {
+      console.log('选中', selection)
+      this.allSelection = selection
+    },
+    // 表格选中数据
+    rowSelect(row) {
+      this.$refs.table.toggleRowSelection(row);
+    },
+    handleCommand(command) {
+      alert(command)
+    },
+    addDivision() {
+      this.isList = false
+      this.page = 'add'
+      this.disable = false
+    },
+    check(row) {
+      this.isList = false
+      this.page = 'check'
+      this.rowDetail = row
+      this.disable = true
+    },
+    doubleClick(row) {
+      this.isList = false
+      this.page = 'check'
+      this.rowDetail = row
+      this.disable = true
+    },
+    edit(row) {
+      this.isList = false
+      this.page = 'edit'
+      this.rowDetail = row
+      this.disable = false
+    },
+    deleteids(row) {
+      console.log('row', row)
+      this.$modal.confirm('确认信息').then(() => {
+        delDivision(row.id).then(res => {
+          if (res.code === 200) {
+            this.$modal.notifySuccess("删除成功");
+            this.getList(this.queryParams)
+          }
+        })
+        }).catch(() => {})
+    },
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+      this.queryParams.pageSize = val
+      this.getList(this.queryParams)
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
+      this.queryParams.pageNum = val
+      this.getList(this.queryParams)
+    },
+    drop() {
+      this.expanded = !this.expanded
+    },
+    // 物料分类显示列表
+    chooseFourClass() {
+      this.$refs.fourClass.init()
+    },
+    // 选择物料分类
+    acceptFourClass(selections) {
+      console.log('收到的四级分类', selections)
+      this.queryParams.materialClassify = selections.code
+    },
+    // 显示物料编码列表
+    test01() {
+      this.$refs.contractSelect.init()
+    },
+    selectionsToInput(selections) {
+      this.queryParams.materialCode = selections[0].code
+    },
+    // 选择默认采购组织
+    chooseRefer(type, isPage, title) {
+      this.referCondition.type = type
+      this.referCondition.isPage = isPage
+      this.referCondition.title = title
+      this.$refs.refer.init(this.referCondition)
+    },
+    selectionsRefer(selection) {
+      if (this.referCondition.title == '订单员') {
+        this.staffOptions = selection
+        this.queryParams.orderPersonal = selection[0].code
+      }
+      if (this.referCondition.title == '采购员') {
+        this.staff2Options = selection
+        this.queryParams.buyer = selection[0].code
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+#MaterialClassDivision {
+  padding: 12px;
+  box-sizing: border-box;
+  overflow-y: scroll;
+}
+.btn_grooup {
+  margin-bottom: 10px;
+  display: flex;
+  justify-content: flex-end;
+}
+.lines {
+  margin-top: 0;
+}
+::v-deep .el-table__row > td {
+  border-right: none;
+}
+ ::v-deep .el-card .el-form-item {
+  margin-bottom: 3px;
+}
+.el-pagination {
+  margin-top: 10px;
+  text-align: right;
+}
+</style>
+<style>
+.exporttable {
+  border: solid 1px #c0c0c0;
+}
+.el-table .el-table__header-wrapper th {
+  font-size: 14px;
+}
+</style>

src/views/purchase/MaterialClassDivision/index.vue

@@ -1,532 +1,172 @@
-<template>
-  <div id="MaterialClassDivision">
-    <div v-if="isList">
-      <el-card style="position: relative;">
-      <el-form class="search_area" label-width="130px">
-        <el-row :gutter="10">
-          <el-col :span="1.5">
-            <el-form-item label="物料一级大类编码">
-              <el-input
-                v-model="queryParams.materialClassifyOne"
-                clearable
-                size="mini"
-                style="width: 200px"
-              />
-            </el-form-item>
-          </el-col>
-          <el-col :span="1.5">
-            <el-form-item label="物料一级大类名称">
-              <el-input
-                v-model="queryParams.materialClassifyOneName"
-                clearable
-                size="mini"
-                style="width: 200px"
-              />
-            </el-form-item>
-          </el-col>
-          <el-col :span="1.5">
-            <el-form-item label="物料二级大类编码">
-              <el-input
-                v-model="queryParams.materialClassifyTwo"
-                clearable
-                size="mini"
-                style="width: 200px"
-              />
-            </el-form-item>
-          </el-col>
-          <el-col :span="1.5">
-            <el-form-item label="物料二级大类名称">
-              <el-input
-                v-model="queryParams.materialClassifyTwoName"
-                clearable
-                size="mini"
-                style="width: 200px"
-              />
-            </el-form-item>
-          </el-col>
-          <!-- <el-col :span="1.5"> -->
-            <!-- <el-form-item label="" label-width="20px"> -->
-            <div style="position: absolute;top: 3px;right: 10px;">
-              <el-button type="primary" size="mini" @click="searchList">搜索</el-button>
-              <el-button size="mini" plain @click="resetList">重置</el-button>
-            </div>
-            <!-- </el-form-item> -->
-          <!-- </el-col> -->
-        </el-row>
-
-        <CollapseTransition>
-          <div v-show="expanded">
-        <el-row :gutter="10">
-          <el-col :span="1.5">
-            <el-form-item label="物料三级大类编码">
-              <el-input
-                v-model="queryParams.materialClassifyThree"
-                clearable
-                size="mini"
-                style="width: 200px"
-              />
-            </el-form-item>
-          </el-col>
-          <el-col :span="1.5">
-            <el-form-item label="物料三级大类名称">
-              <el-input
-                v-model="queryParams.materialClassifyThreeName"
-                clearable
-                size="mini"
-                style="width: 200px"
-              />
-            </el-form-item>
-          </el-col>
-          <el-col :span="1.5">
-            <el-form-item label="物料四级大类编码">
-              <el-input size="mini" style="width: 200px" readonly v-model="queryParams.materialClassify">
-                <el-button slot="append" icon="el-icon-more" @click="chooseFourClass"></el-button>
-              </el-input>
-            </el-form-item>
-          </el-col>
-          <el-col :span="1.5">
-            <el-form-item label="物料四级大类名称">
-              <el-input
-                v-model="queryParams.materialClassifyFourName"
-                clearable
-                size="mini"
-                style="width: 200px"
-              />
-            </el-form-item>
-          </el-col>
-        </el-row>
-
-        <el-row :gutter="10">
-          <el-col :span="1.5">
-            <el-form-item label="物料编码">
-              <el-input style="width: 200px" size="mini" readonly v-model="queryParams.materialCode">
-                  <el-button slot="append" icon="el-icon-more" @click="test01"></el-button>
-              </el-input>
-            </el-form-item>
-          </el-col>
-          <el-col :span="1.5">
-            <el-form-item label="物料名称">
-              <el-input
-                v-model="queryParams.materialName"
-                clearable
-                size="mini"
-                style="width: 200px"
-              />
-            </el-form-item>
-          </el-col>
-          <el-col :span="1.5">
-            <el-form-item label="订单员">
-              <el-select
-                  ref="staffs"
-                  size="mini"
-                  style="width: 200px"
-                  v-model="queryParams.orderPersonal"
-                  clearable
-                  @focus="chooseRefer('CONTACTS_PARAM', true, '订单员')"
-                >
-                  <el-option
-                    v-for="item in staffOptions"
-                    :key="item.id"
-                    :label="item.name"
-                    :value="item.code"
-                  />
-              </el-select>
-            </el-form-item>
-          </el-col>
-          <el-col :span="1.5">
-            <el-form-item label="采购员">
-              <el-select
-                  ref="staffs2"
-                  size="mini"
-                  style="width: 200px"
-                  v-model="queryParams.buyer"
-                  clearable
-                  @focus="chooseRefer('CONTACTS_PARAM', true, '采购员')"
-                >
-                  <el-option
-                    v-for="item in staff2Options"
-                    :key="item.id"
-                    :label="item.name"
-                    :value="item.code"
-                  />
-              </el-select>
-            </el-form-item>
-          </el-col>
-        </el-row>
-
-        <el-row :gutter="10">
-          <el-col :span="1.5">
-            <el-form-item label="生产厂家">
-            <el-input
-              v-model="queryParams.manufacturer"
-              size="mini"
-              placeholder=""
-              clearable
-              style="width: 200px"
-            />
-            </el-form-item>
-          </el-col>
-          <el-col :span="1.5">
-            <el-form-item label="备注">
-            <el-input
-              v-model="queryParams.remark"
-              size="mini"
-              placeholder=""
-              clearable
-              style="width: 200px"
-            />
-            </el-form-item>
-          </el-col>
-        </el-row>
-        </div>
-      </CollapseTransition>
-      </el-form>
-      <el-divider class="lines"><i style="cursor: pointer;" :class="expanded?'el-icon-arrow-up':'el-icon-arrow-down'" @click="drop"></i></el-divider>
-
-        <div class="btn_grooup">
-          <el-button type="primary" size="mini" @click="addDivision">新增</el-button>
-
-          <!-- <el-dropdown size="mini" @command="handleCommand">
-            <el-button size="mini" type="primary" style="margin-left: 10px;">
-              导入<i class="el-icon-arrow-down el-icon--right"></i>
-            </el-button>
-            <el-dropdown-menu slot="dropdown">
-              <el-dropdown-item command="数据导入">数据导入</el-dropdown-item>
-              <el-dropdown-item command="模板下载">模板下载</el-dropdown-item>
-            </el-dropdown-menu>
-          </el-dropdown>
-
-          <el-dropdown size="mini" @command="handleCommand">
-            <el-button size="mini" type="primary" style="margin: 0 10px;">
-              导出<i class="el-icon-arrow-down el-icon--right"></i>
-            </el-button>
-            <el-dropdown-menu slot="dropdown">
-              <el-dropdown-item command="Excel导出">Excel导出</el-dropdown-item>
-              <el-dropdown-item command="导出明细">导出明细</el-dropdown-item>
-            </el-dropdown-menu>
-          </el-dropdown> -->
-
-          <el-button type="primary" size="mini" @click="deletes">删除</el-button>
-        </div>
-        <el-table 
-          :data="tableList" 
-          fit
-          :cell-style="{ borderColor: '#c0c0c0' }"
-          :header-cell-style="{ borderColor: '#c0c0c0' }"
-          class="exporttable"
-          border
-          height="390"
-          max-height="390"
-          style="font-size: 12px;"
-          @selection-change="handleSelectionChange"
-          @row-click="rowSelect"
-          @row-dblclick="doubleClick"
-          ref="table"
-        >
-          <el-table-column show-overflow-tooltip type="selection" width="55" fixed="left"/>
-          <el-table-column show-overflow-tooltip label="序号" type="index" align="center" width="50px" fixed="left"/>
-          <el-table-column show-overflow-tooltip label="物料分类编码" align="center" width="120" prop="materialClassify"/>
-          <!-- <el-table-column show-overflow-tooltip label="物料分类名称" align="center" width="200" prop="materialClassifyName" /> -->
-          <el-table-column show-overflow-tooltip label="一级分类名称" align="center" width="120" prop="materialClassifyOneName" />
-          <el-table-column show-overflow-tooltip label="二级分类名称" align="center" width="120" prop="materialClassifyTwoName" />
-          <el-table-column show-overflow-tooltip label="三级分类名称" align="center" width="120" prop="materialClassifyThreeName"/>
-          <el-table-column show-overflow-tooltip label="四级分类名称" align="center" width="120" prop="materialClassifyFourName" />
-          <el-table-column show-overflow-tooltip label="物料编码" align="center" width="120" prop="materialCode" />
-          <el-table-column show-overflow-tooltip label="物料名称" align="center" width="150" prop="materialName" />
-          <el-table-column show-overflow-tooltip label="生产厂商" align="center" width="150" prop="manufacturer" />
-          <el-table-column show-overflow-tooltip label="所属组织" align="center" width="200" prop="orgName"/>
-          <el-table-column show-overflow-tooltip label="订单员" align="center" width="100" prop="orderPersonalName" />
-          <el-table-column show-overflow-tooltip label="采购员" align="center" width="100" prop="buyerName" />
-          <el-table-column show-overflow-tooltip label="订单部门" align="center" width="150" prop="orderDeptName" />
-          <el-table-column show-overflow-tooltip label="部门" align="center" width="150" prop="puDeptName" />
-          <el-table-column show-overflow-tooltip label="创建人" align="center" width="100" prop="createByName" />
-          <el-table-column show-overflow-tooltip label="创建时间" align="center" width="150" prop="createTime" />
-          <el-table-column show-overflow-tooltip label="修改人" align="center" width="100" prop="updateByName" />
-          <el-table-column show-overflow-tooltip label="修改时间" align="center" width="150" prop="updateTime" />
-          <el-table-column
-          fixed="right"
-          label="操作"
-          align="center"
-          width="150"
-          >
-          <template slot-scope="scope">
-            <el-button type="text" size="mini" @click="check(scope.row)">查看</el-button>
-            <el-button type="text" size="mini" @click="edit(scope.row)">编辑</el-button>
-            <el-button type="text" size="mini" @click="deleteids(scope.row)">删除</el-button>
-          </template>
-        </el-table-column>
-        </el-table>
-
-        <el-pagination
-          background
-          @size-change="handleSizeChange"
-          @current-change="handleCurrentChange"
-          :current-page="queryParams.pageNum"
-          :page-sizes="[10, 20, 50, 100, 200, 500]"
-          :page-size="10"
-          layout="total, sizes, prev, pager, next, jumper"
-          :total=total>
-        </el-pagination>
-      </el-card>
-    </div>
-
-    <Add v-model="isList" v-if="!isList" :pageStu="page" :disable="disable" :row="rowDetail" @refresh="getList"/>
-  
-    <fourClass
-      ref="fourClass"
-      @doSubmit="acceptFourClass"
-      :single="true"
-    />
-
-    <popDialog
-      ref="contractSelect"
-      @doSubmit="selectionsToInput"
-      :single="true"
-    />
-
-    <Refers ref="refer" @doSubmit="selectionsRefer" :single="true"/>
-  </div>
-</template>
-
 <script>
-import Add from './add.vue'
-import CollapseTransition from '@/components/MyCollapse/collapse.vue'
-import {getDivisionList, delDivision} from '@/api/purchase/basic.js'
-// 物料分类
-import fourClass from '@/components/PopDialog/fourClass.vue'
-// 物料编码
-import popDialog from '@/components/PopDialog/index.vue'
-import Refers from '@/components/Refers/refers.vue'
+import { dicts } from "./dicts";
+import useColumns from "./columns";
+import { getDivisionList, delDivision } from "@/api/purchase/basic.js";
 export default {
-  name: 'MaterialClassDivision',
+  name: "MaterialClassDivision",
+  dicts: [...dicts],
   components: {
-    Add,
-    CollapseTransition,
-    fourClass,
-    popDialog,
-    Refers
+    ElSuperUxTable: () => import("@/components/super-ux-table/index.vue"),
+    ElSuperSearch: () => import("@/components/super-search/index.vue"),
+    Division: () => import("./details/index.vue"),
   },
   data() {
+    const { TableColumns, SearchColumns } = useColumns();
+    const page = this.$init.page();
+    const params = this.$init.params(SearchColumns);
+
     return {
-      expanded: false,
-      // 页面配置
-      isList: true,
-      // 页面状态
-      page: '',
-      queryParams: {
-        materialClassifyOne: '',
-        materialClassifyOneName: '',
-        materialClassifyTwo: '',
-        materialClassifyTwoName: '',
-        materialClassifyThree: '',
-        materialClassifyThreeName: '',
-        materialClassify: '',
-        materialClassifyFourName: '',
-        materialCode: '',
-        materialName: '',
-        orderPersonal: '',
-        buyer: '',
-        manufacturer: '',
-        remark: '',
-        pageNum: 1,
-        pageSize: 10
-      },
-      options: [{
-        value: 'Y', label: '是',
-      }, {
-        value: 'N', label: '否'
-      }],
-      staffOptions: [],
-      staff2Options: [],
-      referCondition: {
-        type: '',
-        isPage: true,
-        title: ''
-      },
-      tableList: [],
-      total: 0,
-      rowDetail: {},
-      disable: false,
-      allSelection: []
-    }
-  },
-  created() {
-    this.getList(this.queryParams)
+      size: "mini",
+      loading: false,
+      params: params,
+      page: page,
+      SearchColumns: SearchColumns,
+      TableColumns: TableColumns,
+      tableData: [],
+      selectData: [],
+    };
   },
   methods: {
-    getList(params){
-      getDivisionList(params).then(res => {
-        if (res.code === 200) {
-          this.tableList = res.rows
-          this.total = res.total
+    // 查询
+    async useQuery(prop, page) {
+      try {
+        this.loading = true;
+        let params = {
+          ...prop,
+          ...page,
+        };
+        let { code, rows, total } = await getDivisionList(params);
+        if (code === 200) {
+          this.tableData = rows;
+          this.page.total = total;
         }
-      })
-    },
-    searchList() {
-      this.getList(this.queryParams)
-    },
-    resetList() {
-      this.queryParams = {
-        materialClassifyOne: '',
-        materialClassifyOneName: '',
-        materialClassifyTwo: '',
-        materialClassifyTwoName: '',
-        materialClassifyThree: '',
-        materialClassifyThreeName: '',
-        materialClassify: '',
-        materialClassifyFourName: '',
-        materialCode: '',
-        materialName: '',
-        orderPersonal: '',
-        buyer: '',
-        manufacturer: '',
-        remark: '',
-        pageNum: 1,
-        pageSize: 10
+      } catch (error) {
+      } finally {
+        this.loading = false;
       }
-      this.getList(this.queryParams)
     },
-    deletes() {
-      if (this.allSelection.length == 0) {
-        this.$modal.notifyWarning("请至少选择一条数据!");
-      } else {
-        let param = this.allSelection.map(item => item.id)
-        let rows = param.join()
-        this.$modal.confirm('确认删除选择数据?').then(() => {
-          delDivision(rows).then(res => {
-            if (res.code === 200) {
-              this.$modal.notifySuccess("删除成功");
-              this.getList(this.queryParams)
+    // 重置
+    useReset() {
+      this.page = this.$init.page();
+      this.params = this.$init.params(this.SearchColumns);
+      this.useQuery(this.params, this.page);
+    },
+    // 新增
+    openDivision(status, row) {
+      let { setStatus, fetchItem } = this.$refs.Division;
+      setStatus(true, status);
+      row && fetchItem(row);
+    },
+    selectionChange(selection) {
+      this.selectData = selection;
+    },
+    // 删除
+    useDelete(row) {
+      this.$modal
+        .confirm("是否确认删除？")
+        .then(async () => {
+          try {
+            let { code, msg } = await delDivision(row.id);
+            if (code === 200) {
+              this.$notify.success(msg);
+              this.useQuery(this.params, this.page);
             }
-          })
-        }).catch(() => { })
-      }
-    },
-    handleSelectionChange(selection) {
-      console.log('选中', selection)
-      this.allSelection = selection
-    },
-    // 表格选中数据
-    rowSelect(row) {
-      this.$refs.table.toggleRowSelection(row);
-    },
-    handleCommand(command) {
-      alert(command)
-    },
-    addDivision() {
-      this.isList = false
-      this.page = 'add'
-      this.disable = false
-    },
-    check(row) {
-      this.isList = false
-      this.page = 'check'
-      this.rowDetail = row
-      this.disable = true
-    },
-    doubleClick(row) {
-      this.isList = false
-      this.page = 'check'
-      this.rowDetail = row
-      this.disable = true
-    },
-    edit(row) {
-      this.isList = false
-      this.page = 'edit'
-      this.rowDetail = row
-      this.disable = false
-    },
-    deleteids(row) {
-      console.log('row', row)
-      this.$modal.confirm('确认信息').then(() => {
-        delDivision(row.id).then(res => {
-          if (res.code === 200) {
-            this.$modal.notifySuccess("删除成功");
-            this.getList(this.queryParams)
+          } catch (error) {
+          } finally {
           }
         })
-        }).catch(() => {})
-    },
-    handleSizeChange(val) {
-      console.log(`每页 ${val} 条`);
-      this.queryParams.pageSize = val
-      this.getList(this.queryParams)
+        .catch(() => {});
     },
-    handleCurrentChange(val) {
-      console.log(`当前页: ${val}`);
-      this.queryParams.pageNum = val
-      this.getList(this.queryParams)
-    },
-    drop() {
-      this.expanded = !this.expanded
-    },
-    // 物料分类显示列表
-    chooseFourClass() {
-      this.$refs.fourClass.init()
-    },
-    // 选择物料分类
-    acceptFourClass(selections) {
-      console.log('收到的四级分类', selections)
-      this.queryParams.materialClassify = selections.code
-    },
-    // 显示物料编码列表
-    test01() {
-      this.$refs.contractSelect.init()
-    },
-    selectionsToInput(selections) {
-      this.queryParams.materialCode = selections[0].code
-    },
-    // 选择默认采购组织
-    chooseRefer(type, isPage, title) {
-      this.referCondition.type = type
-      this.referCondition.isPage = isPage
-      this.referCondition.title = title
-      this.$refs.refer.init(this.referCondition)
-    },
-    selectionsRefer(selection) {
-      if (this.referCondition.title == '订单员') {
-        this.staffOptions = selection
-        this.queryParams.orderPersonal = selection[0].code
-      }
-      if (this.referCondition.title == '采购员') {
-        this.staff2Options = selection
-        this.queryParams.buyer = selection[0].code
-      }
-    }
-  }
-}
+  },
+  created() {
+    this.useQuery(this.params, this.page);
+  },
+};
 </script>
 
-<style lang="scss" scoped>
-#MaterialClassDivision {
-  padding: 12px;
-  box-sizing: border-box;
-  overflow-y: scroll;
-}
-.btn_grooup {
-  margin-bottom: 10px;
-  display: flex;
-  justify-content: flex-end;
-}
-.lines {
-  margin-top: 0;
-}
-::v-deep .el-table__row > td {
-  border-right: none;
-}
- ::v-deep .el-card .el-form-item {
-  margin-bottom: 3px;
+<template>
+  <el-card
+    v-loading="loading"
+    :body-style="{
+      height: '100%',
+      padding: 0,
+      display: 'flex',
+      'flex-direction': 'column',
+    }"
+  >
+    <el-super-search
+      v-model="params"
+      :size="size"
+      :dict="dict"
+      :columns="SearchColumns"
+      @reset="useReset"
+      @submit="useQuery(params, page)"
+    ></el-super-search>
+
+    <el-row class="my-4" style="text-align: right">
+      <el-button-group>
+        <el-button type="primary" :size="size" @click="openDivision('add')"
+          >新增</el-button
+        >
+      </el-button-group>
+    </el-row>
+
+    <el-super-ux-table
+      v-model="tableData"
+      :size="size"
+      :dict="dict"
+      :page="page"
+      :columns="TableColumns"
+      ref="MaterialClassDivision"
+      index
+      checkbox
+      pagination
+      convenitentOperation
+      storage-key="MaterialClassDivisionSuperTable"
+      @row-dblclick="(row) => openDivision('see', row)"
+      @selection-change="selectionChange"
+      @pagination="useQuery(params, page)"
+    >
+      <ux-table-column fixed="right" title="操作" align="center" width="150">
+        <template slot-scope="scope">
+          <el-button
+            type="text"
+            :size="size"
+            @click="openDivision('see', scope.row)"
+            >查看</el-button
+          >
+          <el-button
+            type="text"
+            :size="size"
+            @click="openDivision('edit', scope.row)"
+            >编辑</el-button
+          >
+          <el-button type="text" :size="size" @click="useDelete(scope.row)"
+            >删除</el-button
+          >
+        </template>
+      </ux-table-column>
+    </el-super-ux-table>
+
+    <Division
+      ref="Division"
+      :dict="dict"
+      :size="size"
+      @success="useQuery(params, page)"
+    ></Division>
+  </el-card>
+</template>
+
+<style scoped lang="scss">
+.el-card {
+  width: calc(100% - 32px);
+  height: calc(100vh - 32px);
+  margin: 16px;
+  padding: 16px;
+  border-radius: 8px;
 }
-.el-pagination {
-  margin-top: 10px;
-  text-align: right;
+
+.el-button-group + .el-button-group {
+  margin: 0 0 0 8px;
 }
 </style>
-<style>
-.exporttable {
-  border: solid 1px #c0c0c0;
-}
-.el-table .el-table__header-wrapper th {
-  font-size: 14px;
-}
-</style>