采购合同子表必填校验

src/components/super-table/index copy.vue

@@ -0,0 +1,475 @@
+<script>
+export default {
+  name: "SuperTable",
+  props: {
+    // 数据
+    value: {
+      type: [Array],
+      require: true,
+    },
+    // 字典
+    dict: {
+      type: [Object],
+      require: true,
+    },
+    // 分页
+    page: {
+      type: [Object],
+      require: false,
+    },
+    // 模板
+    columns: {
+      type: [Array],
+      require: true,
+    },
+    // 是否显示序号
+    index: {
+      type: Boolean,
+      default: false,
+    },
+    // 是否显示单选
+    radio: {
+      type: Boolean,
+      default: false,
+    },
+    // 是否显示多选
+    checkbox: {
+      type: Boolean,
+      default: false,
+    },
+    // 是否显示分页
+    pagination: {
+      type: Boolean,
+      default: false,
+    },
+    // 是否列显示
+    hiddenColumns: {
+      type: Boolean,
+      default: false,
+    },
+    // 是否禁止选择
+    selectable: {
+      type: Function,
+      default: () => {},
+    },
+
+    // stroage: {
+    //   type: Boolean,
+    //   default: false,
+    // },
+    // hideOperationColumns: {
+    //   type: Boolean,
+    //   default: false,
+    // },
+  },
+  components: {
+    ElDictTag: () => import("@/components/DictTag/index.vue"),
+    ElDraggable: () => import("@/components/draggable/index.vue"),
+    ElFilePreview: () => import("@/components/file-preview/index.vue"),
+    ElComputedInput: () => import("@/components/computed-input/index.vue"),
+    ElPopoverSelectV2: () => import("@/components/popover-select-v2/index.vue"),
+    ElComputedInputV2: () => import("@/components/computed-input-v2/index.vue"),
+    ButtonHide: () => import("./hide.vue"),
+    ButtonFreeze: () => import("./freeze.vue"),
+    IconHide: () => import("./once/hide.vue"),
+    IconSort: () => import("./once/sort.vue"),
+    IconFilter: () => import("./once/filter.vue"),
+    IconFreeze: () => import("./once/freeze.vue"),
+  },
+  data() {
+    const { columns } = this.$props;
+    const innerColumns = columns;
+    return {
+      innerColumns: innerColumns,
+      rowKey: "id",
+      // 选择
+      selectData: [],
+      selectState: false,
+      // 过滤
+      filterData: [],
+      filterState: false,
+    };
+  },
+  computed: {
+    innerValue: {
+      get() {
+        if (this.filterState) {
+          return this.filterData;
+        } else if (this.selectState) {
+          return this.selectData;
+        } else {
+          return this.$props.value;
+        }
+      },
+      set(value) {
+        this.$emit("input", value);
+      },
+    },
+    showColumns: {
+      get() {
+        return this.innerColumns.filter(({ item }) => item.hidden);
+      },
+      set() {},
+    },
+    filterRules: {
+      get() {
+        return Object.fromEntries(
+          this.innerColumns
+            .filter(({ item }) => item.filter && !!item.filter.length)
+            .map(({ item }) => [item.key, item.filter])
+        );
+      },
+      set() {},
+    },
+  },
+  watch: {
+    filterRules: {
+      handler: function (newValue) {
+        function multiFilter(array, filters) {
+          const filterKeys = Object.keys(filters);
+          // filters all elements passing the criteria
+          return array.filter((item) => {
+            // dynamically validate all filter criteria
+            return filterKeys.every((key) => {
+              //ignore when the filter is empty Anne
+              if (!filters[key].length) return true;
+              return !!~filters[key].indexOf(item[key]);
+            });
+          });
+        }
+        this.filterState = JSON.stringify(newValue) !== "{}";
+        this.filterData = multiFilter(this.$props.value, newValue);
+      },
+    },
+  },
+  methods: {
+    //
+    onSelectionChange(value) {
+      this.selectData = value;
+    },
+    //
+    onCellStyle({ row, column }) {
+      const { selectable } = this.$props;
+      // 禁止状态
+      if (!selectable(row)) {
+        return {
+          cursor: "no-drop",
+        };
+      }
+      // 选中状态
+      // if (
+      //   column.label === "#" &&
+      //   this.selectData.find((item) => item.id === row.id)
+      // ) {
+      //   return {
+      //     color: "#fff",
+      //     backgroundColor: "#409EFF",
+      //   };
+      // }
+    },
+    //
+    onRowClick(row, column, event) {
+      const { radio, checkbox, selectable } = this.$props;
+      // 单选
+      if (radio && selectable(row)) {
+        this.selectData = [row];
+        this.innerValue = this.innerValue.map((item) => ({
+          ...item,
+          isChecked: item.id === row.id ? true : false,
+        }));
+        this.$emit("row-select", this.selectData);
+      }
+      // 多选
+      if (checkbox && selectable(row)) {
+        this.$refs.superTable.toggleRowSelection(
+          this.innerValue.find((item) => item.id === row.id)
+        );
+        this.$emit("row-select", this.selectData);
+      }
+    },
+    // 冻结
+    onHide() {
+      this.$nextTick(() => {
+        this.$refs.superTable.doLayout();
+      });
+    },
+    // 排序
+    onSort(prop) {
+      const { key, sort } = prop;
+      this.$nextTick(() => {
+        this.$refs.superTable.sort(key, sort);
+        this.$refs.superTable.doLayout();
+      });
+    },
+    // 冻结
+    onFreeze() {
+      this.$nextTick(() => {
+        this.$refs.superTable.doLayout();
+      });
+    },
+    // 过滤
+    onFilter() {
+      this.$nextTick(() => {
+        this.$refs.superTable.doLayout();
+      });
+    },
+    onFilters(value) {
+      const {
+        item: { key },
+        attr: { dictName },
+      } = value;
+      let dataList = [];
+      const dict = this.dict.type[dictName];
+      dataList = Array.from(
+        new Set(this.innerValue.map((item) => item[key]).filter((item) => item))
+      ).map((item) => ({
+        text: dictName
+          ? (dict.find((dictItem) => dictItem.value == item) || {}).label
+          : item,
+        value: item,
+      }));
+      return dataList;
+    },
+  },
+  created() {},
+  mounted() {},
+  destroyed() {},
+};
+</script>
+
+<template>
+  <div class="el-super-table">
+    <el-table
+      v-bind="$attrs"
+      v-on="$listeners"
+      ref="superTable"
+      border
+      :row-key="rowKey"
+      :data="innerValue"
+      :cell-style="onCellStyle"
+      :row-style="{ height: '50px' }"
+      @row-click="onRowClick"
+      @selection-change="onSelectionChange"
+    >
+      <!-- 序号 -->
+      <el-table-column
+        v-if="index"
+        :resizable="false"
+        fixed
+        width="50"
+        label="序号"
+        align="center"
+        class="is-index"
+      >
+        <template slot-scope="scope">
+          {{ scope.$index + 1 }}
+        </template>
+      </el-table-column>
+      <!-- 多选 -->
+      <el-table-column
+        v-if="checkbox"
+        :column-key="rowKey"
+        :selectable="selectable"
+        fixed
+        width="50"
+        align="center"
+        type="selection"
+        reserve-selection
+      >
+      </el-table-column>
+      <el-table-column
+        v-for="({ item, attr }, index) in showColumns"
+        :key="index"
+        :prop="item.key"
+        :label="item.title"
+        :fixed="item.fixed"
+        :width="item.width"
+        show-overflow-tooltip
+      >
+        <template slot="header" slot-scope="scope">
+          <template>
+            <span
+              :style="{
+                color:
+                  item.sort ||
+                  item.fixed ||
+                  (item.filter && !!item.filter.length)
+                    ? '#1890ff'
+                    : '',
+              }"
+            >
+              {{ item.title }}
+            </span>
+            <icon-sort
+              v-model="item.sort"
+              class="icon-sort"
+              @sort="onSort(item)"
+              :style="{
+                color: item.sort ? '#1890ff' : '',
+                display: item.sort ? 'inline-block' : '',
+              }"
+            ></icon-sort>
+            <icon-freeze
+              v-model="item.fixed"
+              class="icon-freeze"
+              @freeze="onFreeze"
+              :style="{
+                color: item.fixed ? '#1890ff' : '',
+                display: item.fixed ? 'inline-block' : '',
+              }"
+            ></icon-freeze>
+            <icon-filter
+              v-model="item.filter"
+              class="icon-filter"
+              :filters="onFilters({ item, attr })"
+              @filter="onFilter"
+              :style="{
+                color: item.filter && item.filter.length ? '#1890ff' : '',
+                display:
+                  item.filter && item.filter.length ? 'inline-block' : '',
+              }"
+            ></icon-filter>
+            <icon-hide
+              v-if="hiddenColumns"
+              v-model="item.hidden"
+              class="icon-hide"
+              @hide="onHide"
+            ></icon-hide>
+          </template>
+          <!-- <template v-else>{{ item.title }}</template> -->
+        </template>
+        <template slot-scope="scope">
+          <slot :name="item.key" v-bind="scope" :item="item" :attr="attr">
+            <template v-if="attr.is">
+              <component
+                v-if="attr.is === 'el-dict-tag'"
+                v-bind="attr"
+                :size="$attrs.size"
+                :value="scope.row[item.key]"
+                :options="dict.type[attr.dictName]"
+              ></component>
+              <component
+                v-else-if="attr.is === 'el-popover-select-v2'"
+                v-bind="attr"
+                v-model="scope.row[item.key]"
+                :size="$attrs.size"
+                :source.sync="scope.row"
+              >
+              </component>
+              <component
+                v-else-if="attr.is === 'el-select'"
+                v-bind="attr"
+                v-model="scope.row[item.key]"
+                :size="$attrs.size"
+              >
+                <template>
+                  <el-option
+                    v-for="item in dict.type[attr.dictName]"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                  >
+                  </el-option>
+                </template>
+              </component>
+              <component
+                v-else
+                v-bind="attr"
+                v-model="scope.row[item.key]"
+                :size="$attrs.size"
+              >
+              </component
+            ></template>
+            <template v-else>
+              <component v-if="attr.formatter" is="span">{{
+                attr.formatter(scope.row)
+              }}</component>
+              <component v-else is="span">{{
+                scope.row[item.key] || "--"
+              }}</component>
+            </template>
+          </slot>
+        </template>
+      </el-table-column>
+      <slot></slot>
+    </el-table>
+    <div
+      style="
+        height: auto;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      "
+    >
+      <div>
+        <template v-if="checkbox">
+          <el-button
+            v-if="selectState"
+            size="mini"
+            @click="selectState = !selectState"
+          >
+            所有列
+          </el-button>
+          <el-button
+            v-else
+            :disabled="!selectData.length"
+            size="mini"
+            @click="selectState = !selectState"
+          >
+            选择列
+            {{ selectData.length ? ` ：${selectData.length}` : "" }}
+          </el-button>
+        </template>
+        <template v-if="hiddenColumns">
+          <button-hide v-model="innerColumns" @hide="onHide"></button-hide>
+          <button-freeze
+            v-model="showColumns"
+            @freeze="onFreeze"
+          ></button-freeze>
+        </template>
+      </div>
+      <pagination
+        v-if="pagination"
+        v-show="!selectState"
+        :total="page.total"
+        :page.sync="page.pageNum"
+        :limit.sync="page.pageSize"
+        @pagination="$emit('pagination', { ...$event })"
+        style="height: 32px; padding: 0 !important"
+      />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.el-super-table {
+  position: relative;
+}
+.el-super-table .el-table__header .cell {
+  display: flex;
+  .icon-sort {
+    display: none;
+  }
+  &:hover .icon-sort {
+    display: inline-block;
+  }
+  .icon-freeze {
+    display: none;
+  }
+  &:hover .icon-freeze {
+    display: inline-block;
+  }
+  .icon-filter {
+    display: none;
+  }
+  &:hover .icon-filter {
+    display: inline-block;
+  }
+  .icon-hide {
+    display: none;
+  }
+  &:hover .icon-hide {
+    display: inline-block;
+  }
+}
+</style>

src/components/super-table/index.vue

@@ -288,6 +288,7 @@ export default {
       >
         <template slot="header" slot-scope="scope">
           <template>
+            <span v-if="item.require" style="color:red">*</span>
             <span
               :style="{
                 color:

src/views/purchase/contract/edit/columns.js

@@ -3,7 +3,7 @@ import CONFIG from "@/config";
 export default function useColumns() {
   const TableColumns = [
     {
-      item: { key: "puOrgName", title: "采购组织", require: true },
+      item: { key: "puOrgName", title: "采购组织", require: true ,},
       attr: {
         is: "el-popover-select-v2",
         valueKey: "name",
@@ -32,7 +32,7 @@ export default function useColumns() {
       },
     },
     {
-      item: { key: "buyerName", title: "采购员", require: true },
+      item: { key: "buyerName", title: "采购员", require: true ,},
       attr: {
         is: "el-popover-select-v2",
         valueKey: "name",
@@ -46,7 +46,7 @@ export default function useColumns() {
       },
     },
     {
-      item: { key: "supplierName", title: "供应商", require: true },
+      item: { key: "supplierName", title: "供应商", require: true, },
       attr: {
         is: "el-popover-select-v2",
         valueKey: "name",
@@ -58,7 +58,7 @@ export default function useColumns() {
       },
     },
     {
-      item: { key: "contractType", title: "合同类型", require: true },
+      item: { key: "contractType", title: "合同类型", require: true ,},
       attr: { is: "el-select", dictName: "puarchase_contract_contract_type" },
     },
     {
@@ -69,7 +69,7 @@ export default function useColumns() {
       },
     },
     {
-      item: { key: "puDeptName", title: "采购部门", require: true },
+      item: { key: "puDeptName", title: "采购部门", require: true, },
       attr: {
         is: "el-popover-select-v2",
         valueKey: "name",
@@ -81,33 +81,33 @@ export default function useColumns() {
       },
     },
     {
-      item: { key: "supplierTier", title: "供应商层级", require: true },
+      item: { key: "supplierTier", title: "供应商层级", require: true ,},
       attr: { is: "el-select", dictName: "puarchase_contract_supplier_tier" },
     },
     {
-      item: { key: "contractName", title: "合同名称", require: true },
+      item: { key: "contractName", title: "合同名称", require: true, },
       attr: { is: "el-input" },
     },
     {
-      item: { key: "grossRateAverage", title: "平均毛利率 (%)", require: true },
+      item: { key: "grossRateAverage", title: "平均毛利率 (%)", require: true ,},
       attr: {
         is: "el-input-number",
         precision: 2,
       },
     },
     {
-      item: { key: "approveFlow", title: "审批流程", require: true },
+      item: { key: "approveFlow", title: "审批流程", require: true, },
       attr: { is: "el-select", dictName: "puarchase_contract_approve_flow" },
     },
     {
-      item: { key: "consumableClass", title: "耗材类别", require: true },
+      item: { key: "consumableClass", title: "耗材类别", require: true, },
       attr: {
         is: "el-select",
         dictName: "puarchase_contract_consumable_class",
       },
     },
     {
-      item: { key: "effectiveDate", title: "合同生效日期", require: true },
+      item: { key: "effectiveDate", title: "合同生效日期", require: true ,},
       attr: {
         is: "el-date-picker",
         valueFormat: "yyyy-MM-dd",
@@ -125,22 +125,22 @@ export default function useColumns() {
       },
     },
     {
-      item: { key: "contractFormat", title: "合同格式", require: true },
+      item: { key: "contractFormat", title: "合同格式", require: true, },
       attr: {
         is: "el-select",
         dictName: "puarchase_contract_contract_format",
       },
     },
     {
-      item: { key: "productName", title: "产品类别&名称", require: true },
+      item: { key: "productName", title: "产品类别&名称", require: true, },
       attr: { is: "el-input" },
     },
     {
-      item: { key: "endDate", title: "合同终止日期", require: true },
+      item: { key: "endDate", title: "合同终止日期", require: true ,},
       attr: { is: "el-date-picker", valueFormat: "yyyy-MM-dd" },
     },
     {
-      item: { key: "invoiceTax", title: "发票税率 (%)", require: true },
+      item: { key: "invoiceTax", title: "发票税率 (%)", require: true,},
       attr: {
         is: "el-popover-select-v2",
         valueKey: "ntaxrate",
@@ -151,23 +151,23 @@ export default function useColumns() {
       },
     },
     {
-      item: { key: "emergencyDegree", title: "紧急程度", require: true },
+      item: { key: "emergencyDegree", title: "紧急程度", require: true ,},
       attr: {
         is: "el-select",
         dictName: "puarchase_contract_emergency_degree",
       },
     },
     {
-      item: { key: "project", title: "项目医院", require: true },
+      item: { key: "project", title: "项目医院", require: true ,},
       attr: { is: "el-input" },
     },
     {
-      item: { key: "deliveryType", title: "交货方式", require: true },
+      item: { key: "deliveryType", title: "交货方式", require: true, },
       attr: { is: "el-select", dictName: "puarchase_contract_delivery_type" },
     },
     {
       item: { key: "source", title: "合同来源" },
-      attr: { is: "el-input", value: "自制", disabled: true },
+      attr: { is: "el-input", value: "自制", disabled: true, },
     },
     {
       item: { key: "contractPartycName", title: "合同丙方" },
@@ -182,7 +182,7 @@ export default function useColumns() {
       },
     },
     {
-      item: { key: "guaranteePeriodEnd", title: "质保期限", require: true },
+      item: { key: "guaranteePeriodEnd", title: "质保期限", require: true ,},
       attr: { is: "el-input-number", precision: 2 },
     },
     {
@@ -197,11 +197,11 @@ export default function useColumns() {
       attr: { is: "el-date-picker", valueFormat: "yyyy-MM-dd" },
     },
     {
-      item: { key: "isTarget", title: "是否有指标", require: true },
+      item: { key: "isTarget", title: "是否有指标", require: true ,},
       attr: { is: "el-select", dictName: "sys_yes_no" },
     },
     {
-      item: { key: "contractTarget", title: "合同指标", require: true },
+      item: { key: "contractTarget", title: "合同指标", require: true, },
       attr: { is: "el-input", placeholder: '当【是否有指标】="有"时，必填' },
     },
     {
@@ -213,7 +213,7 @@ export default function useColumns() {
       },
     },
     {
-      item: { key: "isRebate", title: "是否有返利", require: true },
+      item: { key: "isRebate", title: "是否有返利", require: true, },
       attr: { is: "el-select", dictName: "sys_yes_no" },
     },
     {
@@ -228,7 +228,7 @@ export default function useColumns() {
       attr: { is: "el-input" },
     },
     {
-      item: { key: "rollbackPolicy", title: "退换货政策", require: true },
+      item: { key: "rollbackPolicy", title: "退换货政策", require: true ,},
       attr: { is: "el-input" },
     },
     {
@@ -282,7 +282,7 @@ export default function useColumns() {
       attr: { is: "el-input" },
     },
     {
-      item: { key: "paymentAgreement", title: "付款协议", require: true },
+      item: { key: "paymentAgreement", title: "付款协议", require: true, },
       attr: {
         is: "el-popover-select-v2",
         valueKey: "name",
@@ -301,7 +301,7 @@ export default function useColumns() {
       },
     },
     {
-      item: { key: "currencyName", title: "币种", require: true },
+      item: { key: "currencyName", title: "币种", require: true, },
       attr: {
         is: "el-popover-select-v2",
         valueKey: "name",
@@ -333,6 +333,7 @@ export default function useColumns() {
           item: {
             title: "物料名称",
             key: "materialName",
+            require: true ,
           },
           attr: {
             is: "el-popover-select-v2",
@@ -352,6 +353,7 @@ export default function useColumns() {
           item: {
             title: "物料编码",
             key: "material",
+            require: true ,
           },
           attr: {},
         },
@@ -383,7 +385,7 @@ export default function useColumns() {
           },
         },
         {
-          item: { title: "税率%", key: "tax" },
+          item: { title: "税率%", key: "tax" ,require: true, },
           attr: {
             is: "el-popover-select-v2",
             valueKey: "ntaxrate",
@@ -400,7 +402,7 @@ export default function useColumns() {
           },
         },
         {
-          item: { title: "含税单价", key: "taxPrice" },
+          item: { title: "含税单价", key: "taxPrice" ,require: true, },
           attr: {
             is: "el-input-number",
             precision: CONFIG.precision,
@@ -417,7 +419,7 @@ export default function useColumns() {
           },
         },
         {
-          item: { title: "无税单价", key: "taxFreePrice" },
+          item: { title: "无税单价", key: "taxFreePrice" ,require: true, },
           attr: {
             formatter: (prop) => {
               const { tax = 0, taxPrice = 0 } = prop;
@@ -524,6 +526,7 @@ export default function useColumns() {
           item: {
             title: "付款起点",
             key: "origin",
+            require: true 
           },
           attr: {
             is: "el-select",
@@ -531,14 +534,14 @@ export default function useColumns() {
           },
         },
         {
-          item: { title: "账期天数", key: "paymetDays" },
+          item: { title: "账期天数", key: "paymetDays" ,require: true, },
           attr: {
             is: "el-input-number",
             precision: 2,
           },
         },
         {
-          item: { title: "付款比例%", key: "ratio" },
+          item: { title: "付款比例%", key: "ratio",require: true,  },
           attr: {
             is: "el-input-number",
             precision: CONFIG.precision,
@@ -575,6 +578,7 @@ export default function useColumns() {
           item: {
             title: "结算方式",
             key: "paymentMeans",
+            require:true,
           },
           attr: {
             is: "el-popover-select-v2",

src/views/purchase/contract/index.vue

@@ -178,18 +178,7 @@ export default {
       :page="page"
       @pagination="useQuery(params, page)"
     >
-      <!-- <el-table-column fixed width="55" align="center" label="#" prop="$index">
-      </el-table-column> -->
-      <!-- <el-table-column fixed width="55" align="center" type="selection">
-      </el-table-column> -->
     </el-super-table>
-    <!-- <pagination
-      :total="page.total"
-      :page.sync="page.pageNum"
-      :limit.sync="page.pageSize"
-      @pagination="useQuery(params, page)"
-      style="height: 32px; margin: 20px 0 0 0; padding: 0 !important"
-    /> -->
   </el-card>
 </template>
 <style scoped lang="scss">

vue.config.js

@@ -45,6 +45,7 @@ module.exports = {
         // target: `http://172.16.13.152:8000/drp-admin`, //豪哥本地
         // target: `http://172.16.13.47:8000/drp-admin`, //这是一个美女的本地
         // target: `http://172.16.13.113:8000/drp-admin`, //DWT本地
+        // target: `http://172.16.13.21:8000/drp-admin`, //DWT本地
 
         //  target: `http://127.0.0.1:8000/drp-admin`,
         changeOrigin: true,