jonhon-mes-web/src/views/processManagement/procepssPlanning.vue

<template>
  <basic-container>
    <avue-crud
      :option="option"
      :table-loading="loading"
      :data="data"
      v-model="form"
      v-model:page="page"
      ref="crud"
      @search-change="searchChange"
      @search-reset="searchReset"
      @selection-change="selectionChange"
      @current-change="currentChange"
      @size-change="sizeChange"
      @refresh-change="refreshChange"
      @on-load="onLoad"
    >
      <template #body>
        <el-tag style="width: 100%; display: block; line-height: 22px"
          >有{{ expireData.length }}个零件工艺即将到期，请尽快维护有效期</el-tag
        >
      </template>
      <template #tip> </template>
      <template #menu-left>
        <el-button type="primary" @click="setIndate()">有效期维护</el-button>
      </template>

      <!-- <template #menu-right="{ size }"> </template> -->
      <template #menu="scope">
        <el-button type="primary" link @click="viewDetails(scope.row.partId, scope.row)"
          >详情</el-button
        >
      </template>
      <template #bsWorkType.wtName="scope">
        <span>
          {{ scope.row.bsWorkType ? scope.row.bsWorkType.wtName : '-' }}
        </span>
      </template>
      <template #name="{ row }">
        <i :class="row.source" style="margin-right: 5px" />
        <span>{{ row.name }}</span>
      </template>
      <template #source="{ row }">
        <div style="text-align: center">
          <i :class="row.source" />
        </div>
      </template>
    </avue-crud>

    <!-- 有效期维护 -->
    <indateDailog
      :id="bcId"
      :set-crew-open="indateOpen"
      v-if="indateOpen"
      type="platingAssort"
      @setIndateCancel="setIndateCancel"
      :title="'有效期维护'"
      :expireData="expireData"
    ></indateDailog>

    <!-- 查看详情数据 -->
    <partDetails
      :is-open="showPartDetails"
      v-if="showPartDetails"
      @cancel="cancel"
      :partType="partType"
      :dialogType="'view'"
      :rowData="rowData"
      :detailsType="'processPlanning'"
    ></partDetails>
  </basic-container>
</template>
<script>
import { mapGetters } from 'vuex';

import indateDailog from './components/indateDailog.vue';
import { getList, getExpire } from '@/api/processManagement/procepssPlanning';
import { getDictionary } from '@/api/system/dict';
import partDetails from './components/processMainte/partDetails.vue';
export default {
  components: {
    indateDailog,
    partDetails,
  },
  data() {
    return {
      showPartDetails: false,
      indateOpen: false,
      bcId: null,
      setCrewOpen: false,
      form: {},
      query: {},
      loading: true,
      selectionList: [],
      parentId: '',
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      option: {
        height: 'auto',
        calcHeight: 32,
        tip: false,
        simplePage: true,
        searchShow: true,
        searchMenuSpan: 18,
        searchIcon: true,
        searchIndex: 3,
        tree: false,
        border: true,
        selection: false,
        viewBtn: true,
        delBtn: false,
        addBtn: false,
        editBtn: false,
        editBtnText: '修改',
        addBtnIcon: ' ',
        viewBtnIcon: ' ',
        delBtnIcon: ' ',
        editBtnIcon: ' ',
        viewBtnText: '详情',
        labelWidth: 120,
        menuWidth: 80,
        dialogWidth: 1200,
        dialogClickModal: false,
        searchEnter: true,
        excelBtn: false,
        viewBtn: false,
        filterBtn: true,
        searchShowBtn: false,
        columnSort: true,
        excelBtn: true,
        columnSort: true,
        index: false,
        showOverflowTooltip: true,
        menuAlign: 'left',
        gridBtn: false,
        searchLabelPosition: 'left',
        searchGutter: 24,
        searchSpan: 6,
        searchMenuPosition: 'right',
        align: 'center',
        column: [
          // {
          //   label: '镀种',
          //   prop: 'partCode',
          //   search: true,
          //   sortable: true,
          //   overHidden: true,
          //   width: 210,
          //   hide: true,
          //   headerAlign: 'center',
          //   align: 'center',
          //   searchLabelWidth: 60,
          // },
          // {
          //   label: '物料编码',
          //   prop: 'partCode',
          //   search: true,
          //   sortable: true,
          //   overHidden: true,
          //   width: 210,
          //   hide: true,
          //   headerAlign: 'center',
          //   align: 'center',
          // },
          // {
          //   label: '子件类型',
          //   prop: 'partCode',
          //   search: true,
          //   sortable: true,
          //   overHidden: true,
          //   width: 210,
          //   hide: true,
          //   headerAlign: 'center',
          //   align: 'center',
          // },
          // {
          //   label: '材料',
          //   prop: 'partCode',
          //   search: true,
          //   sortable: true,
          //   overHidden: true,
          //   width: 210,
          //   hide: true,
          //   headerAlign: 'center',
          //   align: 'center',
          //   searchLabelWidth: 60,
          // },
          // {
          //   label: '粉重',
          //   prop: 'partCode',
          //   search: true,
          //   sortable: true,
          //   overHidden: true,
          //   width: 210,
          //   hide: true,
          //   headerAlign: 'center',
          //   align: 'center',
          //   searchLabelWidth: 60,
          // },
          // {
          //   label: '成型厚度',
          //   prop: 'partCode',
          //   search: true,
          //   sortable: true,
          //   overHidden: true,
          //   width: 210,
          //   hide: true,
          //   headerAlign: 'center',
          //   align: 'center',
          // },
          // {
          //   label: '检验项目',
          //   prop: 'partCode',
          //   search: true,
          //   sortable: true,
          //   overHidden: true,
          //   width: 210,
          //   hide: true,
          //   headerAlign: 'center',
          //   align: 'center',
          //   type: 'select',
          //   filterable:true,
          //   clearable: true,
          //   multiple: true,
          //   dicUrl:'/blade-desk/QA/InspectionItem/list?size=999999&current=1',
          //    props: {
          //     label: 'name',
          //     value: 'id',
          //     res:'res.records'
          //   },
          // },
          {
            label: '零件号',
            prop: 'partCode',
            search: false,
            sortable: true,
            overHidden: true,
            width: 210,
            headerAlign: 'center',
            align: 'left',
            searchLabelWidth: 60,
          },
          {
            label: '零件名称',
            prop: 'partName',
            sortable: true,
            search: false,
            overHidden: true,
            width: 170,
            headerAlign: 'center',
            align: 'left',
          },
          {
            label: '零件类型',
            prop: 'isSintering',
            sortable: true,
            search: false,
            overHidden: true,
            type: 'select',
            filterable:true,
            clearable: true,
            headerAlign: 'center',
            align: 'center',
            dicData: [
              {
                label: '烧结零件',
                value: '1',
              },
              {
                label: '热表零件',
                value: '2',
              },
            ],
            width: 120,
          },

          {
            label: '工艺路线',
            prop: 'craftWay',
            sortable: true,
            search: false,
            overHidden: true,
            headerAlign: 'center',
            align: 'center',
          },
          
          {
            label: '版本号',
            prop: 'partVersion',
            sortable: true,
            search: false,
            overHidden: true,
            headerAlign: 'center',
            align: 'center',
             width: 120,
          },
          // {
          //     label: '状态',
          //     prop: 'status',
          //     sortable: true,
          //     search: false,
          //     overHidden: true,
          //     width: 120,
          //     type: "select",
          //     headerAlign: 'center',
          //     align: 'center',
          //     searchLabelWidth: 45,
          //     dicData: [{
          //         value: 0,
          //         label: '待分派'
          //     }, {
          //         value: 1,
          //         label: '已分派'
          //     }, {
          //         value: 2,
          //         label: '已处理'
          //     }],
          // },
          {
            label: '到期时间',
            prop: 'nextDue',
            sortable: true,
            search: true,
            overHidden: true,
            width: 140,
            headerAlign: 'center',
            align: 'center',
            type: 'date',
            searchRange: true,
            startPlaceholder: '开始时间',
            endPlaceholder: '结束时间',
          },
          {
            label: '维护人',
            prop: 'updateUser',
            sortable: true,
            search: false,
            overHidden: true,
            width: 120,
            headerAlign: 'center',
            align: 'center',
          },
          {
            label: '维护时间',
            prop: 'updateTime',
            sortable: true,
            search: false,
            overHidden: true,
            width: 140,
            headerAlign: 'center',
            align: 'center',
          },
        ],
      },
      data: [],
      title: '分派',
      expireData: [],
      rowData: {},
    };
  },
  mounted() {
    this.getExpireDay();
  },

  methods: {
    cancel() {
      this.showPartDetails = false;
    },
    viewDetails(partId, row, level) {
      this.showPartDetails = true;
      this.rowData = row
      this.dialogType = 'view'
      if (row.children && row.children.length >= 0) {
          this.partType = '烧结'
      } else {
          this.partType = '热表'
      }
    },
    getExpireDay() {
      getDictionary({ code: 'soonToExpire' }).then(res => {
        this.getExpireList(res.data.data[0].dictKey);
      });
    },
    getExpireList(val) {
      getExpire({ expire: val }).then(res => {
        this.expireData = res.data.data;
      });
    },
    // 有效期维护
    setIndate() {
      this.indateOpen = true;
    },
    setIndateCancel(isRefresh) {
      if (isRefresh) {
        this.$refs.myTable.load();
      }
      this.indateOpen = false;
    },
    // 重置
    searchReset() {
      this.query = {};
      this.parentId = 0;
      this.onLoad(this.page);
    },
    // 搜索
    searchChange(params, done) {
      this.query = params;
      this.parentId = '';
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
      done();
    },
    // 选中表格数据
    selectionChange(list) {
      this.selectionList = list;
    },
    //
    selectionClear() {
      this.selectionList = [];
      this.$refs.crud.toggleSelection();
    },
    // 切换 页码
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },
    // 切换页面 数量
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },

    refreshChange() {
      this.onLoad(this.page, this.query);
    },
    // 加载页面数据
    onLoad(page, params = {}) {
      this.loading = true;
      getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
        this.data = res.data.data.records;
        this.loading = false;
        this.page.total = this.data.length;
        this.selectionClear();
      });
    },
  },
};
</script>