kd-aiot-frontend/src/views/technology/route/components/production/index.vue

<template>
  <div class="ele-body">
    <el-card shadow="never">
      <!-- 搜索表单 -->
      <user-search @search="reload" :taskInfo="taskInfo" />
      <!-- 数据表格 -->

      <ele-pro-table
        ref="table"
        :columns="columns"
        :datasource="datasource"
        highlight-current-row
        @selection-change="selectListChange"
        row-key="id"
      >
        <!-- 状态列 -->

        <!-- 操作列 -->
      </ele-pro-table>
    </el-card>
    <!-- 编辑弹窗 -->
    <user-edit
      :visible.sync="showEdit"
      :data="current"
      @done="reload"
      ref="userEdit"
    />
    <!-- 配置工艺参数 -->
    <user-setting
      :visible.sync="showSetting"
      :data="current"
      ref="userSetting"
    />
  </div>
</template>

<script>
  import UserSearch from './components/user-search.vue';
  import UserEdit from './components/user-edit.vue';
  import UserSetting from './components/user-setting.vue';

  import producetask from '@/api/technology/production';
  import route from '@/api/technology/route';

  export default {
    name: 'technologyProduction',
    components: {
      UserSearch,
      UserEdit,
      UserSetting
    },
    props: {
      tableData: {
        type: Array,
        default: () => []
      },

      isRadio: {
        type: Boolean,
        default: false
      },
      taskInfo: {
        type: Object,
        default: () => {}
      }
    },
    data() {
      return {
        // 表格列配置
        columns: [
          {
            columnKey: 'selection',
            type: 'selection',
            width: 45,
            align: 'center',
            selectable: (row, index) => {
              return !this.tableData.some(
                (it) => it.sourceTaskId == row.id || it.id == row.id
              );
            },
            reserveSelection: true,
            fixed: 'left'
          },

          {
            prop: 'code',
            label: '工序编码',
            // sortable: 'custom',
            showOverflowTooltip: true,
            align: 'center',

            minWidth: 110
          },
          {
            prop: 'name',
            label: '工序名称',
            showOverflowTooltip: true,
            align: 'center',
            minWidth: 110
          },
          {
            align: 'center',
            prop: 'controlName',
            label: '工序控制码',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'workCenterName',
            label: '所属工作中心',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'factoriesName',
            label: '所属工厂',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          }
        ],
        // 表格选中数据
        selection: [],
        // 当前编辑数据
        current: null,
        // 是否显示编辑弹窗
        showEdit: false,
        // 是否显示参数弹窗
        showSetting: false,

        rowData: [],
        factoryList: []
      };
    },

    mounted() {
      this.getFactoryList();
    },

    methods: {
      //获取工厂列表
      async getFactoryList() {
        const res = await route.Flist({
          pageNum: 1,
          size: -1,
          type: 1
        });
        this.factoryList = res.list;
      },

      /*配置工艺参数 */
      openSetting(row) {
        this.current = row;
        this.showSetting = true;
      },
      /* 表格数据源 */
      async datasource({ page, limit, where, order }) {
        const res = await producetask.list({
          ...where,
          ...order,
          pageNum: page,
          isDetail: true,
          size: limit
        });
        return res;
      },

      /* 刷新表格 */
      reload(where) {
        this.$refs.table.reload({ page: 1, where: where });
      },
      /* 打开编辑弹窗 */
      openEdit(row) {
        this.current = row;
        this.showEdit = true;
        this.$refs.userEdit.$refs.form &&
          this.$refs.userEdit.$refs.form.clearValidate();
      },

      /* 删除 */
      remove(row) {
        const loading = this.$loading({ lock: true });

        producetask
          .delete([row.id])
          .then((msg) => {
            loading.close();
            this.$message.success('删除' + msg);
            this.reload();
          })
          .catch((e) => {
            loading.close();
            // this.$message.error(e.message);
          });
      },
      /* 批量删除 */
      removeBatch() {
        if (!this.selection.length) {
          this.$message.error('请至少选择一条数据');
          return;
        }
        this.$confirm('确定要删除选中的工序吗?', '提示', {
          type: 'warning'
        })
          .then(() => {
            const loading = this.$loading({ lock: true });
            producetask
              .delete(this.selection.map((d) => d.id))
              .then((msg) => {
                loading.close();
                this.$message.success('删除' + msg);
                this.reload();
              })
              .catch((e) => {
                loading.close();

                // this.$message.error(e.message);
              });
          })
          .catch(() => {});
      },

      // 表格某一行的单击事件
      selectListChange(selection) {
        if (this.isRadio) {
          if (Array.isArray(selection) && selection.length > 1) {
            //点击勾选框
            this.$refs.table.toggleRowSelection(selection[0], false);
            this.$refs.table.toggleRowSelection(selection[1], true);
          } else if (!Array.isArray(selection)) {
            //点击行
            this.$refs.table.toggleRowSelection(selection, false);
            this.$refs.table.toggleRowSelection(selection, true);
          } else {
            this.rowData = [];
            this.rowData = Array.isArray(selection) ? selection[0] : selection;
          }
        } else {
          this.selection = selection;
        }
      },

      getRowData() {
        return this.rowData;
      }
    }
  };
</script>

<style lang="scss" scoped>
  :deep(.el-checkbox__input.is-disabled) {
    .el-checkbox__inner {
      background-color: rgba(142, 128, 128, 0.584) !important;
    }
  }
</style>