33

src/api/bpm/components/bomApprover/index.js

@@ -0,0 +1,12 @@
+import request from '@/utils/request';
+
+// 获取产品BOM列表
+export async function getBomPageCategoryId(params) {
+  const res = await request.get(`/main/bomCategory/pageByCategoryId`, { params });
+  if (res.data.code == 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+

src/views/bpm/handleTask/components/bomApprover/BOM-search.vue

@@ -0,0 +1,116 @@
+<!-- 搜索表单 -->
+<template>
+  <el-form
+    label-width="77px"
+    class="ele-form-search"
+    @keyup.enter.native="search"
+    @submit.native.prevent
+  >
+    <el-row :gutter="10">
+      <el-col v-bind="styleResponsive ? { md: 6 } : { span: 6 }">
+        <el-form-item label="BOM编码">
+          <el-input clearable v-model.trim="where.code" placeholder="请输入" />
+        </el-form-item>
+      </el-col>
+      <el-col v-bind="styleResponsive ? { md: 6 } : { span: 6 }">
+        <el-form-item label="BOM名称">
+          <el-input clearable v-model.trim="where.name" placeholder="请输入" />
+        </el-form-item>
+      </el-col>
+      <el-col v-bind="styleResponsive ? { md: 6 } : { span: 6 }">
+        <el-form-item label="产品编码">
+          <el-input
+            clearable
+            v-model.trim="where.categoryCode"
+            placeholder="请输入"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col v-bind="styleResponsive ? { md: 6 } : { span: 6 }">
+        <el-form-item label="产品名称">
+          <el-input
+            clearable
+            v-model.trim="where.categoryName"
+            placeholder="请输入"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col v-bind="styleResponsive ? { md: 6 } : { span: 6 }">
+        <el-form-item label="状态">
+          <el-select
+            clearable
+            v-model.trim="where.status"
+            placeholder="请选择"
+            class="w100"
+          >
+            <el-option
+              v-for="item in Object.entries(statusOpt)"
+              :key="item[0]"
+              :label="item[1]"
+              :value="item[0]"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+      </el-col>
+
+
+      <el-col v-bind="styleResponsive ? { md: 12 } : { span: 12 }">
+        <div class="ele-form-actions">
+          <el-button
+            type="primary"
+            icon="el-icon-search"
+            class="ele-btn-icon"
+            @click="search"
+          >
+            查询
+          </el-button>
+
+          <el-button @click="reset" icon="el-icon-refresh" class="ele-btn-icon"
+            >重置</el-button
+          >
+        </div>
+      </el-col>
+    </el-row>
+  </el-form>
+</template>
+
+<script>
+  export default {
+    name: 'BomSearchForm',
+    props: {
+      statusOpt: Object
+    },
+    data() {
+      // 默认表单数据
+      const defaultWhere = {
+        name: '',
+        code: '',
+
+        categoryName: '',
+        status: ''
+      };
+      return {
+        defaultWhere,
+        // 表单数据
+        where: { ...defaultWhere }
+      };
+    },
+    computed: {
+      // 是否开启响应式布局
+      styleResponsive() {
+        return this.$store.state.theme.styleResponsive;
+      }
+    },
+    methods: {
+      /* 搜索 */
+      search() {
+        this.$emit('search', this.where);
+      },
+      /*  重置 */
+      reset() {
+        this.where = { ...this.defaultWhere };
+        this.search();
+      }
+    }
+  };
+</script>

src/views/bpm/handleTask/components/bomApprover/detailDialog.vue

@@ -1,148 +1,131 @@
 <template>
   <div>
-
     <headerTitle title="Bom审批"></headerTitle>
-
-    <el-form :model="formData" ref="tableForm">
-      <ele-pro-table ref="table" :needPage="false" :columns="columns" row-key="id">
-
-      </ele-pro-table>
-    </el-form>
-
-
+    <BOMSearch @search="reload" :statusOpt="statusOpt" />
+
+    <ele-pro-table
+      ref="table"
+      :columns="columns"
+      :datasource="datasource"
+      class="dict-table"
+      tool-class="ele-toolbar-actions"
+    >
+    </ele-pro-table>
   </div>
 </template>
-  
-<script>
-
-
-
 
-export default {
-  components: {
-
-  },
-  props: {
-    businessId: {
-      default: ''
+<script>
+  import BOMSearch from './BOM-search.vue';
+  import { getBomPageCategoryId } from '@/api/bpm/components/bomApprover';
+
+  export default {
+    components: {
+      BOMSearch
+    },
+    props: {
+      businessId: {
+        default: ''
+      }
+    },
+    mixins: [],
+
+    data() {
+      return {
+        visible: false,
+        title: '',
+
+        columns: [
+          {
+            label: '序号',
+            columnKey: 'index',
+            type: 'index',
+            width: 55,
+            align: 'center',
+            showOverflowTooltip: true
+          },
+          {
+            prop: 'code',
+            label: 'BOM编码',
+            showOverflowTooltip: true
+          },
+          {
+            prop: 'name',
+            label: 'BOM名称',
+            showOverflowTooltip: true
+          },
+          {
+            prop: 'categoryCode',
+            label: '产品编码',
+            showOverflowTooltip: true
+          },
+          {
+            prop: 'categoryName',
+            label: '产品名称',
+            showOverflowTooltip: true
+          },
+          {
+            prop: 'dosage',
+            label: '用量',
+            showOverflowTooltip: true
+          },
+
+          {
+            prop: 'measuringUnit',
+            label: '计量单位',
+            showOverflowTooltip: true
+          },
+          {
+            prop: 'versions',
+            label: '版本'
+          },
+          {
+            prop: 'status ',
+            label: '状态',
+            formatter: (row) => {
+              return this.statusOpt[+row.status];
+            }
+          },
+          {
+            prop: 'createName',
+            label: '创建人',
+            showOverflowTooltip: true
+          },
+          {
+            prop: 'createTime',
+            label: '创建日期',
+            showOverflowTooltip: true
+          }
+        ],
+        statusOpt: {
+          '': '全部',
+          0: '已停用',
+          1: '已发布'
+        }
+      };
+    },
+    created() {},
+    methods: {
+      /* 表格数据源 */
+      datasource({ where, page, limit }) {
+        return getBomPageCategoryId({
+          ...where,
+          pageNum: page,
+          size: limit,
+          id: this.businessId,
+        });
+      },
+
+      /* 刷新表格 */
+      reload(where) {
+        this.$refs.table.reload({ where });
+      }
     }
-  },
-  mixins: [],
-
-  data() {
-    return {
-      visible: false,
-      title: '',
-
-      // 表格列配置
-      columns: [
-        {
-          width: 45,
-          type: 'expand',
-          columnKey: 'materialList',
-          align: 'center',
-          slot: 'expand'
-        },
-
-        {
-          width: 50,
-          label: '序号',
-          type: 'index',
-          align: 'center',
-          slot: 'index'
-        },
-
-        {
-          prop: 'salesOrderCode',
-          label: '销售订单号',
-          showOverflowTooltip: true,
-          align: 'center',
-          minWidth: 170
-        },
-        {
-          prop: 'customerName',
-          label: '客户名称',
-          align: 'center',
-          showOverflowTooltip: true
-        },
-        {
-          prop: 'serialNo',
-          label: '客户代号',
-          align: 'center',
-          showOverflowTooltip: true
-        },
-        {
-          prop: 'productCode',
-          label: '产品编码',
-          align: 'center',
-          showOverflowTooltip: true,
-          minWidth: 140
-        },
-
-        {
-          prop: 'productName',
-          label: '产品名称',
-          align: 'center',
-          minWidth: 120
-        },
-
-        {
-          prop: 'model',
-          label: '型号',
-          align: 'center',
-          minWidth: 120
-        },
-
-        {
-          prop: 'brandNo',
-          label: '牌号',
-          align: 'center'
-        },
-
-        {
-          prop: 'deliveryTime',
-          label: '交付日期',
-          align: 'center',
-          showOverflowTooltip: true
-        },
-        {
-          prop: 'contractNum',
-          label: '合同数量',
-          align: 'center'
-        },
-        {
-          prop: 'lackNum',
-          label: '欠交数量',
-          align: 'center'
-        },
-
-
-
-
-      ],
-
-
-
-      rules: {},
-
-    };
-  },
-  created() {
-
-  },
-  methods: {
-
-
-  }
-};
+  };
 </script>
-  
-<style lang="scss" scoped>
-:deep(.el-table__expanded-cell) {
 
-  padding-bottom: 30px !important;
-  border-bottom: 12px solid #CCFFCC !important;
-}
+<style lang="scss" scoped>
+  :deep(.el-table__expanded-cell) {
+    padding-bottom: 30px !important;
+    border-bottom: 12px solid #ccffcc !important;
+  }
 </style>
-
-