kd-aiot-frontend/src/views/material/BOMmanage/components/routingDialog.vue

<template>
  <el-dialog
    title="工艺路线"
    v-if="visible"
    :visible.sync="visible"
    :before-close="handleClose"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    append-to-body
    width="70%"
  >
    <div class="ele-body">
      <el-card shadow="never">
        <!-- 搜索表单 -->
        <el-form
          label-width="120px"
          class="ele-form-search"
          @keyup.enter.native="search"
          @submit.native.prevent
        >
          <el-row>
            <el-col v-bind="styleResponsive ? { lg: 5, md: 12 } : { span: 5 }">
              <el-form-item label="工艺路线组编码:">
                <el-input
                  clearable
                  v-model.trim="where.code"
                  placeholder="请输入"
                />
              </el-form-item>
            </el-col>
            <el-col v-bind="styleResponsive ? { lg: 5, md: 12 } : { span: 5 }">
              <el-form-item label="工艺路线名称:">
                <el-input
                  clearable
                  v-model.trim="where.name"
                  placeholder="请输入"
                />
              </el-form-item>
            </el-col>
            <el-col v-bind="styleResponsive ? { lg: 5, md: 12 } : { span: 5 }">
              <el-form-item label="生产版本:">
                <el-select
                  v-model.trim="where.produceVersionId"
                  filterable
                  placeholder="请选择"
                  :style="{ width: '100%' }"
                >
                  <el-option
                    v-for="item in versionList"
                    :key="item.code"
                    :label="item.code + '-' + item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col v-bind="styleResponsive ? { lg: 5, md: 12 } : { span: 5 }">
              <el-form-item label="状态:" label-width="70px">
                <el-select
                  v-model.trim="where.status"
                  filterable
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in statusList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col v-bind="styleResponsive ? { lg: 4, md: 12 } : { span: 4 }">
              <el-form-item label-width="20px">
                <el-button
                  type="primary"
                  icon="el-icon-search"
                  class="ele-btn-icon"
                  @click="search"
                >
                  查询
                </el-button>
                <el-button @click="reset">重置</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <!-- 数据表格 -->
        <ele-pro-table
          ref="table"
          :columns="columns"
          :datasource="datasource"
          :selection.sync="selection"
          row-key="id"
        >


          <template v-slot:code="{ row }">
            <el-link type="primary" :underline="false" @click="openDetail(row)">
              {{ row.code }}</el-link
            >
          </template>

          <!-- 状态列 -->
          <template v-slot:status="{ row }">
            {{ checkStatus(row) }}
          </template>

          <template v-slot:routeType="{ row }">
            {{ row.routeType == 2 ? '委外' : '生产' }}
          </template>
        </ele-pro-table>
      </el-card>
      <div class="btns">
        <el-button type="primary" size="small" @click="selected"
          >选择</el-button
        >
        <el-button size="small" @click="handleClose">关闭</el-button>
      </div>
      <UserDetail
        :visible.sync="detailEdit"
        :data="current"
        @close="detailEdit = false"
      ></UserDetail>
    </div>
  </el-dialog>
</template>

<script>
  import {
    workingProcedureUpdate,
    workingProcedureSave
  } from '@/api/material/BOM';
  import { pageList } from '@/api/technology/version/version.js';
  import UserDetail from './user-detail.vue';
  import route from '@/api/technology/route';
  export default {
    name: 'technologyRoute',
    components: {
      UserDetail
    },
    data() {
      return {
        visible: false,
        selection: [],
        versionList: [],
        where: {},
        // 表格列配置
        columns: [
          {
            columnKey: 'selection',
            type: 'selection',
            width: 45,
            align: 'center',
            reserveSelection: true,
            selectable: (row, index) => {
              return this.tableData.processRoute
                ? !this.tableData.processRoute.list.some(
                    (it) => it.id == row.id
                  )
                : true;
            },
            fixed: 'left'
          },
          {
            prop: 'code',
            label: '工艺路线组编码',
            showOverflowTooltip: true,
            align: 'center',
            minWidth: 110,
            slot: 'code'
          },
          {
            prop: 'name',
            label: '工艺路线名称',
            showOverflowTooltip: true,
            align: 'center',
            minWidth: 110
          },

          {
            prop: 'version',
            label: '工艺路线版本',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          },

          {
            prop: 'produceVersionName',
            label: '生产版本',
            align: 'center',
            showOverflowTooltip: true
          },

          {
            prop: 'status',
            label: '状态',
            align: 'center',
            slot: 'status',
            showOverflowTooltip: true,
            minWidth: 110
          },

          {
            slot: 'routeType',
            label: '类型',
            align: 'center',
            showOverflowTooltip: true
          }
        ],

        // 表格选中数据
        selection: [],
        // 当前编辑数据
        current: null,
        // 是否显示编辑弹窗
        showEdit: false,
        detailEdit: false,

        statusList: [
          { label: '草稿', value: -1 },
          { label: '失效', value: 0 },
          { label: '生效', value: 1 }
        ],
        loading: false
      };
    },
    computed: {
      // 是否开启响应式布局
      styleResponsive() {
        return this.$store.state.theme.styleResponsive;
      }
    },
    created() {
      this.getVersionList();
    },
    methods: {
      reset() {
        this.where = {};
        this.search();
      },
      handleClose() {
        this.visible = false;
      },
      open(treeData, tableData) {

        this.treeData = treeData;


        if (
          Object.prototype.hasOwnProperty.call(tableData, 'processRoute') &&
          Object.prototype.hasOwnProperty.call(tableData.processRoute, 'list')
        ) {
          this.tableData = tableData;
        } else {
          this.tableData = tableData;
          this.tableData['processRoute'] = { list: [] }
        }
        this.visible = true;
       
      },
      selected() {
        let routingId = this.selection.map((it) => it.id);
        route.getProcessById(routingId).then((data) => {
          console.log(this.tableData);
          if (this.tableData.taskParam) {
            let newArr = [];
            for (let i = 0; i < data.length; i++) {
              let isHas = false;
              for (let j = 0; j < this.tableData.taskParam.length; j++) {
                if (data[i].sourceTaskId == this.tableData.taskParam[j].sourceTaskId) {
                  isHas = true;
                  break;
                }
              }
              if (!isHas) {
                newArr.push(data[i]);
              }
            }
            workingProcedureUpdate({
              id: this.tableData.id,
              categoryId: this.treeData.categoryId,
              bomCategoryId: this.treeData.id,
              categoryCode: this.treeData.categoryCode,
              processRoute: {
                list: this.tableData.processRoute.list.concat(this.selection)
              },
              taskParam: this.tableData.taskParam.concat(newArr)
            }).then(() => {
              this.$emit('reload');
              this.visible = false;
            });
          } else {
            workingProcedureSave({
              categoryId: this.treeData.categoryId,
              bomCategoryId: this.treeData.id,
              categoryCode: this.treeData.categoryCode,
              processRoute: {
                list: this.selection
              },
              taskParam: data.map((item) => {
                return {
                  ...item,
                  versions: this.treeData.versions,
                  status: this.treeData.status
                };
              })
            }).then(() => {
              this.$emit('reload');
              this.visible = false;
            });
          }
        });
      },
      async getVersionList() {
        const res = await pageList({
          pageNum: 1,
          size: 100
        });

        this.versionList = res.list;
      },
      search() {
        this.reload(this.where);
      },
      /* 表格数据源 */
      async datasource({ page, limit, where, order }) {
        const res = await route.list({
          ...where,
          ...order,
          pageNum: page,
          size: limit
        });
        return res;
      },

      checkStatus(row) {
        let obj = this.statusList.find((it) => it.value == row.status);
        return obj.label;
      },

      /* 刷新表格 */
      reload(where) {
        this.$refs.table.reload({ page: 1, where: where });
      },
      openDetail(row) {
        this.current = row;
        this.detailEdit = true;
      }
    }
  };
</script>
<style lang="scss" scoped>
  .btns {
    text-align: center;
    padding: 10px 0;
  }
</style>