JG-ADMIN-TEMP/src/views/plan/prepare/index.vue

<template>
  <div class="mainContentBox">
    <avue-crud
        ref="crudRef"
        v-model:search="search"
        v-model="form"
        :data="data"
        :option="option"
        v-model:page="page"
        @row-save="createRow"
        @row-update="updateRow"
        @row-del="deleteRow"
        @tree-load="treeLoad"
        @search-change="searchChange"
        @search-reset="resetChange"
        @size-change="dataList"
        @current-change="dataList"
        @selection-change="selectionChange"
        :span-method="spanMethod"
    >
      <template #orderCode="{ row }">
        <el-text v-if="row.orderCode">{{row.orderCode}}</el-text>
        <div style="width: 100%; height: 100%;display: flex" v-if="!row.orderCode && row.operationDetails">
          <div style="width: 120px;height: 100%"  v-for="item in row.operationDetails">
            <el-progress
                :text-inside="true"
                :stroke-width="35"
                :font-color="'#ff0000'"
                :percentage="item.completeNum/row.workOrderNum * 100"
                status="success"
            >{{item.operationName}}(完成{{item.completeNum}})
            </el-progress>
          </div>
        </div>
        <el-tag v-if="row.workOrderCode === '-'" type="primary">库存数量:{{ row.stockNum }}</el-tag>
      </template>
      <template #menu="{size,row,index}">
<!--        <el-button
            type="primary"
            link
            v-if="row.bom === '0' || row.dataFile === '0'|| row.routeId === '0'|| row.craftFile === '0'"
            size="small"
            @click="handleEdit(row,0)"
        ><i-ep-edit />编辑
        </el-button>-->
        <el-button
            type="primary"
            link
            v-if="row.materialState === '-' || row.deviceState === '-' || row.bom === '-' || row.craftFile === '-'"
            size="small"
            @click="handleRefresh(row.workOrderCode)"
        ><i-ep-edit />刷新
        </el-button>
<!--        <el-button
            type="primary"
            link
            v-if="row.bom === '0' || row.dataFile === '0'|| row.routeId === '0'|| row.craftFile === '0' || row.materialState === '0' || row.deviceState === '0'"
            size="small"
            @click="deleteRow(row)"
        ><i-ep-edit />删除
        </el-button>-->
      </template>
<!--      <template #menu-left="{ size }">
        <el-button
          :disabled="toDeleteIds.length < 1"
          type="danger"
          icon="el-icon-delete"
          :size="size"
          @click="multipleDelete"
          >删除</el-button
        >
      </template>-->
    </avue-crud>
    <el-dialog
        v-model="dialog.visible"
        :title="dialog.title"
        width="80%"
        @close="dialog.visible = false"
    >
      <work-order-page queryType="1"  @orderInfo="orderInfo"/>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, getCurrentInstance } from "vue";
import { useCrud } from "@/hooks/userCrud";
import {prepareCheckInfo,refreshPrepareCheckInfo} from "@/api/order"
import {queryChildrenInfo} from "@/api/process"
import { useCommonStoreHook } from "@/store";
const { isShowTable, tableType } = toRefs(useCommonStoreHook());
const router = useRouter();
const test = () => {
  isShowTable.value = true;
  tableType.value = tableType.value == 1 ? 2 : 1;
};

// 传入一个url，后面不带/
const { form, data, option, search, page, toDeleteIds, Methords, Utils } =
  useCrud({
    src: "/api/v1/plan/prepare",
  });
const { dataList, createRow, updateRow, deleteRow, searchChange, resetChange } = Methords; //增删改查
const { selectionChange, multipleDelete } = Methords; //选中和批量删除事件
const { checkBtnPerm, downloadTemplate, exportData } = Utils; //按钮权限等工具

const crudRef = ref(null); //crudRef.value 获取avue-crud对象
const dialog = reactive({
  title: "订单选择",
  visible: false,
});
const merginState = ref(false)
const spanMethod = ({ row, column, rowIndex, columnIndex })=>{
  if(row.hasParent){
    if(columnIndex === 6){
      merginState.value = true
      return [1, 11]
    }else if(columnIndex > 6 && merginState){
      return [0,0]
    }
  }else{
    merginState.value = false
  }
  /*if (rowIndex % 2 === 0) {
    if (columnIndex === 0) {
      return [1, 2]
    } else if (columnIndex === 1) {
      return [0, 0]
    }
  }*/
}
const checkInfo = (code) =>{
  prepareCheckInfo(code).then((data)=>{
    form.value.deviceStr = data.data.deviceStr
    form.value.deviceState = data.data.deviceState
    form.value.materialState = data.data.materialState
    form.value.materialStr = data.data.materialStr
  })
}
const treeLoad = (tree, treeNode, resolve) =>{
  queryChildrenInfo(tree.workOrderCode).then((data)=>{
    resolve(data.data)
  })
}
const handleEdit =(row,index)=>{
  crudRef.value && crudRef.value.rowEdit(row,index);
}
const handleRefresh =(code)=>{
  refreshPrepareCheckInfo(code).then((data)=>{
    if(data.code === '200'){
      ElMessage.success("刷新成功")
      dataList()
    }else{
      ElMessage.error(data.msg)
    }
  })
}
const orderInfo = (value) => {
  form.value.workOrderCode = value.workOrderCode
  form.value.orderCode = value.orderCode
  form.value.orderName = value.orderName
  form.value.materialCode = value.materialCode
  form.value.materialName = value.materialName
  form.value.materialModel = value.materialModel
  dialog.visible = false
}
// 设置表格列或者其他自定义的option
option.value = Object.assign(option.value, {
  delBtn: false,
  selection: false,
  editBtn: false,
  tree: true,
  viewBtn: false,
  lazy: true,
  menuWidth: 100,
  rowKey: 'workOrderCode',
  addBtn: false,
  dialogWidth: '45%', // 设置编辑弹窗的宽度为50%
  column: [
    {
      label: "工单号",
      prop: "workOrderCode",
      search: true,
      minWidth: 200,
      editDisabled : true,
      rules: [
        {
          required: true,
          message: "工单号不能为空",
          trigger: "trigger",
        },
      ],
      click: ({ value, column }) => {
        if(column.boxType){
          dialog.visible = true
        }
      },
      change:({ value, column }) =>{
        if(value){
          checkInfo(value)
        }
      }
    },
    {
      label: "产品编码",
      prop: "materialCode",
      search: true,
      width: 130,
      overHidden: true,
      disabled: true,
      rules: [
        {
          required: true,
          message: "产品编码不能为空",
          trigger: "trigger",
        },
      ],
    },
    {
      label: "产品名称",
      prop: "materialName",
      disabled: true,
      width: 140,
      overHidden: true,
      search: true,
      rules: [
        {
          required: true,
          message: "产品名称不能为空",
          trigger: "trigger",
        },
      ],
    },
    {
      label: "产品规格",
      prop: "materialModel",
      disabled: true,
      search: true,
      width: 140,
      overHidden: true,
      rules: [
        {
          required: true,
          message: "产品规格不能为空",
          trigger: "trigger",
        },
      ],
    },
    {
      label: "数量",
      prop: "workOrderNum",
      disabled: true,
      width: 80,
      overHidden: true,
    },
    {
      label: "计划单号",
      prop: "orderCode",
      search: true,
      width: 130,
      overHidden: true,
      disabled: true,
      rules: [
        {
          required: true,
          message: "计划单号不能为空",
          trigger: "trigger",
        },
      ],
    },
    {
      label: "计划名称",
      prop: "orderName",
      search: true,
      disabled: true,
      width: 150,
      overHidden: true,
      rules: [
        {
          required: true,
          message: "计划名称不能为空",
          trigger: "trigger",
        },
      ],
    },
    {
      label: "文件资料",
      width: 350,
      overHidden: true,
      prop: "craftFile",
      addDisplay: false,
      viewDisplay: false,
      editDisplay: false,
      html: true,
      formatter: (val) => {
        if (val.craftFile !== '-') {
          return '<b class="el-tag el-tag--success el-tag--light">'+val.craftFile+'</b>';
        }
        return '<b class="el-tag el-tag--danger el-tag--light">-</b>';
      },
    },
    {
      label: "工艺BOM",
      width: 115,
      overHidden: true,
      prop: "bom",
      viewDisplay: false,
      addDisplay: false,
      editDisplay: false,
      html: true,
      formatter: (val) => {
        if (val.bom !== '-') {
          return '<b class="el-tag el-tag--success el-tag--light">'+val.bom+'</b>';
        }
        return '<b class="el-tag el-tag--danger el-tag--light">-</b>';
      },
    },
    {
      label: "工艺路线",
      width: 115,
      overHidden: true,
      viewDisplay: false,
      addDisplay: false,
      editDisplay: false,
      prop: "routeId",
      html: true,
      formatter: (val) => {
        if (val.routeId !== '-') {
          return '<b class="el-tag el-tag--success el-tag--light">'+val.routeId+'</b>';
        }
        return '<b class="el-tag el-tag--danger el-tag--light">-</b>';
      },
    },
    /*{
      label: "设计文件",
      prop: "dataFile",
      width: 115,
      overHidden: true,
      viewDisplay: false,
      addDisplay: false,
      editDisplay: false,
      html: true,
      formatter: (val) => {
        if (val.dataFile === '1') {
          return '<b class="el-tag el-tag--success el-tag--light">已齐套</b>';
        }
        return '<b class="el-tag el-tag--danger el-tag--light">未齐套</b>';
      },
    },*/
   /* {
      label: "工艺文件",
      width: 115,
      overHidden: true,
      prop: "craftFiles",
      type: 'checkbox',
      span: 12,
      hide: true,
      dicData: [{label: '已齐套', value: '1'}],
    },
    {
      label: "工艺BOM",
      width: 150,
      span: 12,
      type: "checkbox",
      overHidden: true,
      prop: "boms",
      hide: true,
      dicData: [ { label: "已齐套", value: "1", }, ],
    },
    {
      label: "工艺路线",
      width: 150,
      span: 12,
      type: "checkbox",
      overHidden: true,
      hide: true,
      prop: "routeIds",
      dicData: [ { label: "已齐套", value: "1", }, ],
    },*/
   /* {
      label: "设计文件",
      prop: "dataFiles",
      width: 150,
      overHidden: true,
      type: 'checkbox',
      span: 12,
      multiple: true,
      hide: true,
      dicData: [ { label: "已齐套", value: "1", }, ],
    },*/
    {
      label: "设备状况",
      prop: "deviceState",
      width: 150,
      hide: true,
      addDisplay: false,
      overHidden: true,
      viewDisplay: false,
      editDisplay: false,
      span: 24,
      dicData: [ { label: "已齐套", value: "1", },{ label: "未齐套", value: "0", }, ],
    },
    {
      label: "物料状态",
      prop: 'materialState',
      width: 130,
      hide: true,
      editDisplay: false,
      addDisplay: false,
      viewDisplay: false,
      overHidden: true,
      span: 24,
      dicData: [ { label: "已齐套", value: "1", },{ label: "未齐套", value: "0", },  ],
    },
    {
      label: "设备状况",
      prop: "deviceStr",
      disabled: true,
      width: 200,
      overHidden: true,
      span: 24,
      html: true,
      formatter: (val) => {
        if (val.deviceState === '1') {
          return '<b class="el-tag el-tag--success el-tag--light">已齐套</b>';
        }
        return '<b class="el-tag el-tag--danger el-tag--light">'+val.deviceStr+'</b>';
      },
    },
    {
      label: "物料状态",
      prop: 'materialStr',
      disabled: true,
      width: 200,
      overHidden: true,
      span: 24,
      html: true,
      formatter: (val) => {
        if (val.materialState === '1') {
          return '<b class="el-tag el-tag--success el-tag--light">已齐套</b>';
        }
        return '<b class="el-tag el-tag--danger el-tag--light">'+val.materialStr+'</b>';
      },
    },
    {
      label: "创建时间",
      prop: "created",
      width: 200,
      display: false
    },
    {
      label: "创建人",
      width: 200,
      prop: "creator",
      display: false
    },
  ],
});


onMounted(() => {
  form.value.routeId = "1"
  form.value.materialState = 1
  let url = window.location.href
  if(url.includes("workOrderCode")){
    search.value.workOrderCode = url.substring(url.indexOf("workOrderCode")+ 14)
  }
  dataList();
});

</script>
<style scoped>
:deep(.el-progress-bar__innerText) {
  color: #737674;
  display: inline-block;
  font-size: 12px;
  margin: 0 5px;
  vertical-align: middle;
}
</style>