迁移BOM物料清单功能

src/views/production-master-data/material-model/bill-of-materials/components/BomRelationship/index.vue

@@ -0,0 +1,282 @@
+<template>
+  <el-dialog :visible.sync="visibleProxy" append-to-body :close-on-click-modal="false" fullscreen :show-close="false" @open="bootstrap">
+    <template #title>
+      <div class="dialog-title">
+        <span>{{ relationshipTitle }}</span>
+        <el-button size="small" @click="handleClose">{{ $t(key('return')) }}</el-button>
+      </div>
+    </template>
+
+    <el-row class="relationship-layout">
+      <el-col :span="4" class="step-panel">
+        <el-menu :default-active="activeStep" @select="handleStepSelect">
+          <el-menu-item v-for="item in stepOptions" :key="item.code" :index="item.code">
+            <span slot="title">{{ item.name }}</span>
+          </el-menu-item>
+        </el-menu>
+      </el-col>
+      <el-col :span="20" class="relation-panel">
+        <el-card shadow="never" class="relation-card relation-card-in">
+          <div slot="header" class="card-header">
+            <span>IN</span>
+            <div>
+              <el-button size="mini" type="danger" icon="el-icon-delete" @click="deleteSelected('in')">{{ $t(key('delete')) }}</el-button>
+              <el-button size="mini" type="success" icon="el-icon-plus" @click="openMaterialDialog('in')">{{ $t(key('add')) }}</el-button>
+            </div>
+          </div>
+          <el-table ref="inTable" :data="inData" border height="360" v-loading="loading" @selection-change="inSelection = $event">
+            <el-table-column type="selection" width="48" />
+            <el-table-column prop="bom_source_category_name" :label="$t(key('material_category'))" width="120" />
+            <el-table-column prop="bom_source_code" :label="$t(key('material_code'))" min-width="180" show-overflow-tooltip />
+            <el-table-column prop="bom_source_name" :label="$t(key('material_name'))" min-width="180" show-overflow-tooltip />
+            <el-table-column :label="$t(key('input_quantity'))" width="180">
+              <template slot-scope="{ row }">
+                <el-input v-model="row.input_quantity" size="mini" @blur="saveQuantity(row)" />
+              </template>
+            </el-table-column>
+            <el-table-column prop="unit_name" :label="$t(key('unit'))" width="100" />
+            <el-table-column :label="$t(key('operation'))" width="100">
+              <template slot-scope="{ row }">
+                <el-button type="text" size="mini" style="color:#F56C6C" @click="deleteRows([row])">{{ $t(key('delete')) }}</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-card>
+
+        <el-card shadow="never" class="relation-card">
+          <div slot="header" class="card-header">
+            <span>OUT</span>
+            <div>
+              <el-button size="mini" type="danger" icon="el-icon-delete" @click="deleteSelected('out')">{{ $t(key('delete')) }}</el-button>
+              <el-button size="mini" type="success" icon="el-icon-plus" @click="openMaterialDialog('out')">{{ $t(key('add')) }}</el-button>
+            </div>
+          </div>
+          <el-table ref="outTable" :data="outData" border height="250" v-loading="loading" @selection-change="outSelection = $event">
+            <el-table-column type="selection" width="48" />
+            <el-table-column prop="bom_source_category_name" :label="$t(key('material_category'))" width="120" />
+            <el-table-column prop="bom_source_code" :label="$t(key('material_code'))" min-width="180" show-overflow-tooltip />
+            <el-table-column prop="bom_source_name" :label="$t(key('material_name'))" min-width="180" show-overflow-tooltip />
+            <el-table-column prop="unit_name" :label="$t(key('unit'))" width="140" />
+            <el-table-column :label="$t(key('operation'))" width="100">
+              <template slot-scope="{ row }">
+                <el-button type="text" size="mini" style="color:#F56C6C" @click="deleteRows([row])">{{ $t(key('delete')) }}</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-card>
+      </el-col>
+    </el-row>
+
+    <el-dialog :title="$t(key('select_add_material'))" :visible.sync="materialVisible" append-to-body width="820px" :close-on-click-modal="false" @open="loadMaterials(true)">
+      <el-form :inline="true" size="mini" @submit.native.prevent>
+        <el-form-item>
+          <el-radio-group v-model="materialOnlySelected" @change="loadMaterials(true)">
+            <el-radio-button :label="false">{{ $t(key('all')) }}</el-radio-button>
+            <el-radio-button :label="true">{{ $t(key('selected')) }}</el-radio-button>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item>
+          <el-button-group>
+            <el-button @click="changeMaterialCategory('')">{{ $t(key('all')) }}</el-button>
+            <el-button v-for="item in materialCategories" :key="item.id" @click="changeMaterialCategory(item.id)">{{ item.name }}</el-button>
+          </el-button-group>
+        </el-form-item>
+        <el-form-item>
+          <el-input v-model.trim="materialSearch.all" :placeholder="$t(key('search_by_code_or_name'))" clearable style="width:220px" @keyup.enter.native="loadMaterials(true)">
+            <el-button slot="append" icon="el-icon-search" @click="loadMaterials(true)" />
+          </el-input>
+        </el-form-item>
+      </el-form>
+      <el-table ref="materialTable" :data="materialData" border height="380" row-key="id" @selection-change="materialSelection = $event">
+        <el-table-column type="selection" reserve-selection width="50" />
+        <el-table-column prop="bom_source_category_name" :label="$t(key('material_category'))" width="130" />
+        <el-table-column prop="code" :label="$t(key('material_code'))" min-width="150" show-overflow-tooltip />
+        <el-table-column prop="name" :label="$t(key('material_name'))" min-width="150" show-overflow-tooltip />
+        <el-table-column prop="remark" :label="$t(key('remark'))" show-overflow-tooltip />
+      </el-table>
+      <el-pagination class="material-pagination" :current-page="materialPagination.current" :page-size="materialPagination.size" :total="materialPagination.total" layout="total, prev, pager, next" @current-change="onMaterialPageChange" />
+      <span slot="footer">
+        <el-button size="small" @click="materialVisible = false">{{ $t(key('cancel')) }}</el-button>
+        <el-button size="small" type="primary" @click="confirmMaterialSelection">{{ $t(key('confirm')) }}</el-button>
+      </span>
+    </el-dialog>
+  </el-dialog>
+</template>
+
+<script>
+import { i18nMixin } from '@/composables/useI18n'
+import { getWorkingsubclassAll } from '@/api/production-master-data/process-step'
+import { getMaterialCategoryAll } from '@/api/production-master-data/material-category'
+import { getMaterialMasterList } from '@/api/production-master-data/material-master'
+import { getBomRelationshipList, createBomRelationship, editBomRelationship, deleteBomRelationship } from '@/api/production-master-data/bill-of-materials'
+
+function readPageData (res) {
+  const data = res && res.data ? res.data : res
+  if (!data) return { list: [], total: 0 }
+  if (Array.isArray(data)) return { list: data, total: data.length }
+  return { list: data.data || data.list || [], total: Number(data.count || data.total || 0) }
+}
+
+export default {
+  name: 'BomRelationship',
+  mixins: [i18nMixin('page.production_master_data.material_model.bill_of_materials')],
+  props: {
+    visible: { type: Boolean, default: false },
+    bom: { type: Object, default: () => ({}) }
+  },
+  data () {
+    return {
+      loading: false,
+      stepOptions: [],
+      materialCategories: [],
+      activeStep: '',
+      inData: [],
+      outData: [],
+      inSelection: [],
+      outSelection: [],
+      materialVisible: false,
+      materialDirection: 'in',
+      materialCategoryId: '',
+      materialOnlySelected: false,
+      materialSearch: { all: '' },
+      materialData: [],
+      materialSelection: [],
+      materialPagination: { current: 1, size: 10, total: 0 }
+    }
+  },
+  computed: {
+    visibleProxy: {
+      get () { return this.visible },
+      set (val) { this.$emit('update:visible', val) }
+    },
+    relationshipTitle () {
+      return this.bom && this.bom.name ? `【${this.bom.name}】${this.$t(this.key('bom_management'))}` : this.$t(this.key('bom_management'))
+    },
+    currentCheckList () {
+      return this.materialDirection === 'in' ? this.inData : this.outData
+    }
+  },
+  methods: {
+    async bootstrap () {
+      this.inData = []
+      this.outData = []
+      this.stepOptions = []
+      const [steps, categories] = await Promise.all([getWorkingsubclassAll({}), getMaterialCategoryAll({})])
+      this.stepOptions = (steps && steps.data) || steps || []
+      this.materialCategories = (categories && categories.data) || categories || []
+      this.activeStep = this.stepOptions.length ? this.stepOptions[0].code : ''
+      if (this.activeStep) this.loadRelationship()
+    },
+    handleClose () {
+      this.visibleProxy = false
+      this.$emit('saved')
+    },
+    handleStepSelect (key) {
+      this.activeStep = key
+      this.loadRelationship()
+    },
+    async loadRelationship () {
+      if (!this.bom.id || !this.activeStep) return
+      this.loading = true
+      try {
+        const res = await getBomRelationshipList({ product_bom_id: this.bom.id, workingsubclass_in: this.activeStep, workingsubclass_out: this.activeStep })
+        const data = (res && res.data) || res || {}
+        this.inData = data.in || []
+        this.outData = data.out || []
+      } finally {
+        this.loading = false
+      }
+    },
+    openMaterialDialog (direction) {
+      this.materialDirection = direction
+      this.materialOnlySelected = false
+      this.materialCategoryId = ''
+      this.materialSearch = { all: '' }
+      this.materialPagination.current = 1
+      this.materialVisible = true
+    },
+    changeMaterialCategory (categoryId) {
+      this.materialCategoryId = categoryId
+      this.loadMaterials(true)
+    },
+    async loadMaterials (resetPage = false) {
+      if (resetPage) this.materialPagination.current = 1
+      this.$nextTick(() => this.$refs.materialTable && this.$refs.materialTable.clearSelection())
+      const idList = this.currentCheckList.map(item => item.bom_source_id).filter(Boolean)
+      if (this.materialOnlySelected && this.materialSelection.length === 0) {
+        this.materialData = []
+        this.materialPagination.total = 0
+        return
+      }
+      const selectedId = this.materialOnlySelected ? this.materialSelection.map(item => item.id) : undefined
+      const res = await getMaterialMasterList({
+        bom_source_category_id: this.materialCategoryId,
+        idList,
+        selected_id: selectedId,
+        all: this.materialSearch.all,
+        page_no: this.materialPagination.current,
+        page_size: this.materialPagination.size
+      })
+      const { list, total } = readPageData(res)
+      this.materialData = list
+      this.materialPagination.total = total
+    },
+    onMaterialPageChange (page) {
+      this.materialPagination.current = page
+      this.loadMaterials(false)
+    },
+    async confirmMaterialSelection () {
+      const relationData = this.materialSelection.map(item => ({ bom_source_id: item.id }))
+      if (this.materialDirection === 'in') {
+        const duplicates = relationData.filter(next => this.inData.some(old => old.bom_source_id === next.bom_source_id))
+        if (duplicates.length) {
+          this.$message.warning(this.$t(this.key('duplicate_material_selected')))
+          return
+        }
+      } else if (this.outData.length !== 0 || relationData.length > 1) {
+        this.$message.warning(this.$t(this.key('out_only_one')))
+        return
+      }
+      await createBomRelationship({
+        bom_id: this.bom.id,
+        type: this.materialDirection === 'in' ? 'in_workingsubclass' : 'out_workingsubclass',
+        workingsubclass: this.activeStep,
+        relation_data: relationData
+      })
+      this.materialVisible = false
+      this.$message.success(this.$t(this.key('operation_success')))
+      this.loadRelationship()
+    },
+    async saveQuantity (row) {
+      await editBomRelationship(row)
+      this.$message.success(this.$t(this.key('operation_success')))
+      this.loadRelationship()
+    },
+    deleteSelected (direction) {
+      const rows = direction === 'in' ? this.inSelection : this.outSelection
+      if (!rows.length) {
+        this.$message.warning(this.$t(this.key('please_select_data')))
+        return
+      }
+      this.deleteRows(rows)
+    },
+    async deleteRows (rows) {
+      await deleteBomRelationship({ id: rows.map(item => item.id) })
+      this.$message.success(this.$t(this.key('operation_success')))
+      this.loadRelationship()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.dialog-title { display: flex; justify-content: space-between; align-items: center; padding: 0 20px; }
+.relationship-layout { border-top: 1px solid #dcdfe6; }
+.step-panel { height: calc(100vh - 100px); overflow: auto; border-right: 1px solid #ebeef5; }
+.relation-panel { height: calc(100vh - 100px); overflow: auto; padding: 16px; }
+.relation-card { margin-bottom: 12px; }
+.relation-card-in { min-height: 430px; }
+.card-header { display: flex; align-items: center; justify-content: space-between; }
+.material-pagination { margin-top: 12px; text-align: right; }
+/deep/ .el-dialog__body { padding: 0; }
+</style>

src/views/production-master-data/material-model/bill-of-materials/index.vue

@@ -0,0 +1,225 @@
+<template>
+  <d2-container>
+    <template #header>
+      <div class="search-bar">
+        <el-form :inline="true" size="mini">
+          <el-form-item :label="$t(key('bom_version_code'))">
+            <el-input v-model.trim="search.code" :placeholder="$t(key('enter_bom_version_code'))" clearable style="width:220px" @keyup.enter.native="onSearch" />
+          </el-form-item>
+          <el-form-item :label="$t(key('bom_version_name'))">
+            <el-input v-model.trim="search.name" :placeholder="$t(key('enter_bom_version_name'))" clearable style="width:220px" @keyup.enter.native="onSearch" />
+          </el-form-item>
+          <el-form-item :label="$t(key('product_model_name'))">
+            <el-select v-model="search.product_model_id" :placeholder="$t(key('select_product_model_name'))" clearable filterable style="width:220px">
+              <el-option v-for="item in productOptions" :key="item.value" :label="item.label" :value="item.value" />
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" icon="el-icon-search" @click="onSearch">{{ $t(key('query')) }}</el-button>
+            <el-button icon="el-icon-refresh" @click="onReset">{{ $t(key('reset')) }}</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+    </template>
+
+    <page-table ref="pageTable" :columns="columns" :data="tableData" :loading="loading" :toolbar-buttons="toolbarButtons" :row-buttons="rowButtons" :pagination="pagination" auto-height @page-change="onPageChange">
+      <template #col-status="{ row }">
+        <span v-if="String(row.status) === '1'" class="status-on"><i class="el-icon-circle-check" /> {{ $t(key('enable')) }}</span>
+        <span v-else class="status-off"><i class="el-icon-circle-close" /> {{ $t(key('disable')) }}</span>
+      </template>
+      <template #col-remark="{ row }">
+        <el-popover v-if="row.remark && row.remark.length > 20" placement="top-start" width="300" trigger="hover" :content="row.remark">
+          <span slot="reference" style="cursor:pointer">{{ row.remark.substr(0, 20) }}...</span>
+        </el-popover>
+        <span v-else>{{ row.remark }}</span>
+      </template>
+    </page-table>
+
+    <page-dialog-form ref="dialogForm" :visible.sync="dialogVisible" :title="dialogTitle" width="38%" :form-cols="dialogFormCols" :form-data="formData" :rules="rules" label-width="120px" :submitting="submitting" :confirm-text="key('confirm')" :cancel-text="key('cancel')" @submit="onDialogSubmit" @close="onDialogClose" />
+
+    <bom-relationship :visible.sync="relationshipVisible" :bom="currentBom" @saved="fetchData" />
+  </d2-container>
+</template>
+
+<script>
+import { useTableColumns } from '@/composables/useTableColumns'
+import { useTableButtons } from '@/composables/useTableButtons'
+import { i18nMixin } from '@/composables/useI18n'
+import { confirmMixin } from '@/composables/useConfirmHandle'
+import PageTable from '@/components/page-table'
+import PageDialogForm from '@/components/page-dialog-form'
+import BomRelationship from './components/BomRelationship'
+import { getProductBatteryAll } from '@/api/production-master-data/product-management'
+import { getBomList, createBom, editBom, deleteBom } from '@/api/production-master-data/bill-of-materials'
+
+function readPageData (res) {
+  const data = res && res.data ? res.data : res
+  if (!data) return { list: [], total: 0 }
+  if (Array.isArray(data)) return { list: data, total: data.length }
+  return { list: data.data || data.list || [], total: Number(data.count || data.total || 0) }
+}
+
+export default {
+  name: 'production-master-data-bill-of-materials',
+  components: { PageTable, PageDialogForm, BomRelationship },
+  mixins: [i18nMixin('page.production_master_data.material_model.bill_of_materials'), confirmMixin],
+  data () {
+    return {
+      loading: false,
+      submitting: false,
+      tableData: [],
+      productOptions: [],
+      dialogVisible: false,
+      dialogTitle: '',
+      editId: '',
+      handleType: 'create',
+      relationshipVisible: false,
+      currentBom: {},
+      search: { code: '', name: '', product_model_id: '' },
+      pagination: { current: 1, size: 10, total: 0 },
+      formData: this.defaultFormData(),
+      rules: {
+        code: [
+          { required: true, message: this.key('enter_bom_code'), trigger: 'blur' },
+          { min: 1, max: 45, message: this.key('length_1_45'), trigger: 'blur' }
+        ],
+        name: [
+          { required: true, message: this.key('enter_bom_name'), trigger: 'blur' },
+          { min: 1, max: 45, message: this.key('length_1_45'), trigger: 'blur' }
+        ],
+        product_model_id: [{ required: true, message: this.key('select_product_model'), trigger: 'change' }]
+      },
+      columns: [],
+      toolbarButtons: [],
+      rowButtons: [],
+      baseFormCols: [
+        [{ type: 'input', prop: 'code', label: this.key('bom_version_code'), placeholder: this.key('enter_bom_version_code'), clearable: true, style: { width: '90%' } }],
+        [{ type: 'input', prop: 'name', label: this.key('bom_version_name'), placeholder: this.key('enter_bom_version_name'), clearable: true, style: { width: '90%' } }],
+        [{ type: 'select', prop: 'product_model_id', label: this.key('product_model_name'), placeholder: this.key('select_product_model_name'), clearable: true, filterable: true, style: { width: '90%' }, options: [] }],
+        [{ type: 'select', prop: 'status', label: this.key('status'), placeholder: this.key('select_status'), clearable: true, style: { width: '90%' }, options: [{ label: this.$t(this.key('disable')), value: '0' }, { label: this.$t(this.key('enable')), value: '1' }] }],
+        [{ type: 'input', prop: 'remark', inputType: 'textarea', autosize: { minRows: 2, maxRows: 6 }, label: this.key('remark'), placeholder: this.key('enter_remark'), clearable: true, style: { width: '90%' } }]
+      ]
+    }
+  },
+  computed: {
+    dialogFormCols () {
+      return this.baseFormCols.map(row => row.map(item => {
+        if (item.prop === 'product_model_id') return { ...item, options: this.productOptions }
+        return item
+      }))
+    }
+  },
+  created () {
+    this.loadProductOptions()
+    this.columns = useTableColumns([
+      { prop: 'code', label: this.key('bom_version_code'), minWidth: 140 },
+      { prop: 'name', label: this.key('bom_version_name'), minWidth: 160 },
+      { prop: 'product_model_name', label: this.key('product_model_name'), minWidth: 160 },
+      { prop: 'status', label: this.key('status'), slot: 'status', width: 110 },
+      { prop: 'username', label: this.key('create_user'), minWidth: 100 },
+      { prop: 'create_time', label: this.key('create_time'), minWidth: 160 },
+      { prop: 'remark', label: this.key('remark'), slot: 'remark', minWidth: 160 },
+      { prop: '_actions', label: this.key('operation'), width: 230, fixed: 'right' }
+    ])
+    const btns = useTableButtons({
+      toolbar: [{ key: 'add', label: this.key('add'), icon: 'el-icon-plus', type: 'primary', auth: '/production_configuration/matetial_model/bom/create', onClick: this.openAdd }],
+      row: [
+        { key: 'set_bom', label: this.key('set_bom'), icon: 'el-icon-setting', auth: '/production_configuration/matetial_model/bom/edit_bom_relationship', onClick: this.openRelationship },
+        { key: 'edit', label: this.key('edit'), icon: 'el-icon-edit', auth: '/production_configuration/matetial_model/bom/edit', onClick: this.openEdit },
+        { key: 'delete', label: this.key('delete'), icon: 'el-icon-delete', color: 'danger', auth: '/production_configuration/matetial_model/bom/delete', onClick: this.handleDelete }
+      ]
+    }, this.$permission)
+    this.toolbarButtons = btns.toolbarButtons
+    this.rowButtons = btns.rowButtons
+    this.fetchData()
+  },
+  methods: {
+    defaultFormData () {
+      return { code: '', name: '', product_model_id: '', status: '1', remark: '' }
+    },
+    async loadProductOptions () {
+      const res = await getProductBatteryAll({})
+      const list = (res && res.data) || res || []
+      this.productOptions = list.map(item => ({ label: item.name, value: item.product_model_id || item.id }))
+    },
+    async fetchData () {
+      this.loading = true
+      try {
+        const res = await getBomList({ ...this.search, page_no: this.pagination.current, page_size: this.pagination.size })
+        const { list, total } = readPageData(res)
+        this.tableData = list
+        this.pagination.total = total
+      } finally {
+        this.loading = false
+      }
+    },
+    onSearch () {
+      this.pagination.current = 1
+      this.fetchData()
+    },
+    onReset () {
+      this.search = { code: '', name: '', product_model_id: '' }
+      this.pagination.current = 1
+      this.fetchData()
+    },
+    onPageChange (page) {
+      this.pagination.current = page.current
+      this.pagination.size = page.size
+      this.fetchData()
+    },
+    resetForm () {
+      this.formData = this.defaultFormData()
+      this.editId = ''
+    },
+    openAdd () {
+      this.handleType = 'create'
+      this.dialogTitle = this.key('add_bom_info')
+      this.$nextTick(() => {
+        this.$refs.dialogForm && this.$refs.dialogForm.reset()
+        this.resetForm()
+        this.dialogVisible = true
+      })
+    },
+    openEdit (row) {
+      this.handleType = 'edit'
+      this.dialogTitle = this.key('edit_bom_info')
+      this.editId = row.id
+      this.formData = { code: row.code, name: row.name, product_model_id: row.product_model_id, status: String(row.status), remark: row.remark || '' }
+      this.dialogVisible = true
+    },
+    openRelationship (row) {
+      this.currentBom = { id: row.id, name: row.name }
+      this.relationshipVisible = true
+    },
+    async onDialogSubmit () {
+      this.submitting = true
+      try {
+        if (this.handleType === 'create') await createBom(this.formData)
+        else await editBom({ ...this.formData, id: this.editId })
+        this.$message.success(this.$t(this.key('operation_success')))
+        this.dialogVisible = false
+        this.fetchData()
+      } finally {
+        this.submitting = false
+      }
+    },
+    onDialogClose () {
+      this.resetForm()
+    },
+    async handleDelete (row) {
+      const cancelled = await this.$confirmAction({ message: this.key('confirm_message'), title: this.key('prompt'), confirmButtonText: this.key('confirm'), cancelButtonText: this.key('cancel') }, () => deleteBom({ id: [row.id] }))
+      if (cancelled) return
+      this.$message.success(this.$t(this.key('operation_success')))
+      this.pagination.current = Math.min(this.pagination.current, Math.ceil((this.pagination.total - 1) / this.pagination.size) || 1)
+      this.fetchData()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.search-bar { padding: 10px 0; }
+.status-on { color: #67C23A; }
+.status-off { color: #909399; }
+/deep/ .el-form-item--mini.el-form-item { margin-bottom: 4px; }
+</style>