JG-ADMIN-TEMP/src/views/base/craftManagement/process/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"
      @search-change="searchChange"
      @search-reset="resetChange"
      @size-change="dataList"
      @current-change="dataList"
      @selection-change="selectionChange"
      :before-open="beforeOpenDialog"
    >
      <template #menu-left="{ size }">
        <el-button
          :disabled="toDeleteIds.length < 1"
          type="danger"
          icon="el-icon-delete"
          :size="size"
          @click="multipleDelete"
          >删除</el-button
        >
      </template>

      <template #customFieldName-form="scope">
        <el-select
          v-model="customFieldNameValues"
          multiple
          filterable
          allow-create
          default-first-option
          :reserve-keyword="false"
          placeholder="请输入名称，按回车创建"
          @change="customFieldChange"
        >
          <el-option
            v-for="item in customFieldOptions"
            :key="item.value"
            :label="item.value"
            :value="item.value"
          />
        </el-select>
      </template>

      <template #menu-right="{}">
        <el-dropdown split-button
          >导入
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item
                @click="downloadTemplate('/api/v1/op/baseOperation/template')"
              >
                <i-ep-download />下载模板
              </el-dropdown-item>
              <el-dropdown-item @click="importExcelData">
                <i-ep-top />导入数据
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <!-- <el-button
          class="ml-3"
          @click="exportData('/api/v1/plan/order/export')"
        >
          <template #icon> <i-ep-download /> </template>导出
        </el-button> -->
      </template>
    </avue-crud>
    <ExcelUpload ref="uploadRef" @finished="uploadFinished" />
  </div>
</template>
<script setup>
import { ref, getCurrentInstance } from "vue";
import { useCrud } from "@/hooks/userCrud";
import dictDataUtil from "@/common/configs/dictDataUtil";
import ButtonPermKeys from "@/common/configs/buttonPermission";
import { useCommonStoreHook, useDictionaryStore } from "@/store";

// 数据字典相关
const { dicts } = useDictionaryStore();

// 传入一个url，后面不带/
const { form, data, option, search, page, toDeleteIds, Methords, Utils } =
  useCrud({
    src: "/api/v1/op/baseOperation",
  });
const { dataList, createRow, updateRow, deleteRow, searchChange, resetChange } =
  Methords; //增删改查
const { selectionChange, multipleDelete } = Methords; //选中和批量删除事件
const { checkBtnPerm, downloadTemplate, exportData } = Utils; //按钮权限等工具
// checkBtnPerm(ButtonPermKeys.PLAN.BTNS.order_add) :permission="permission"
// const permission = reactive({
//   delBtn: checkPerm(buttonPermission.PLAN.BTNS.order_del),
//   addBtn: checkPerm(buttonPermission.PLAN.BTNS.order_add),
//   editBtn: checkPerm(buttonPermission.PLAN.BTNS.order_edit),
//   menu: true,
// });

const crudRef = ref(null); //crudRef.value 获取avue-crud对象

onMounted(() => {
  // console.log("crudRef", crudRef)
  dataList();
});

/**
 * 上传excel相关
 */
const uploadRef = ref(null);
const uploadFinished = () => {
  // 上传完成后的刷新操作
  page.currentPage = 1;
  dataList();
};
const importExcelData = () => {
  if (uploadRef.value) {
    uploadRef.value.show("/api/v1/op/baseOperation/import");
  }
};

// 设置表格列或者其他自定义的option
const switchOp = [
  {
    label: "否",
    value: 0,
  },
  {
    label: "是",
    value: 1,
  },
];

// 自定义工序项目字段名称相关方法
const customFieldNameValues = ref([]);
const customFieldOptions = [];
const customFieldChange = (val) => {
  let result = Array.from(val);
  result = result.map((item) => {
    return {
      value: item,
      isSelected: true,
    };
  });

  form.value.customFieldName = JSON.stringify(result);
};
const beforeOpenDialog = (done, type, loading) => {
  if (
    type === "edit" &&
    form.value.customFieldName &&
    JSON.parse(form.value.customFieldName)?.length > 0
  ) {
    customFieldOptions.value = JSON.parse(form.value.customFieldName);
    customFieldNameValues.value = customFieldOptions.value.map(
      (item) => item.value
    );
  }

  done();
};

option.value = Object.assign(option.value, {
  searchEnter: true,
  selection: true,
  labelWidth: 120,
  column: [
    {
      label: "工序名称",
      prop: "operationName",
      span: 12,
      search: true,
      rules: [
        {
          required: true,
          message: "工序名称不能为空",
          trigger: "blur",
        },
      ],
    },
    {
      label: "工序编码",
      prop: "operationCode",
      span: 12,
      search: true,
      display: false,
    },
    {
      label: "工段",
      prop: "workSection",
      type: "select",
      search: true,
      dicData: dicts.workshop_section,
      props: {
        label: "dictLabel",
        value: "dictValue",
      },
      span: 12,
      rules: [
        {
          required: true,
          message: "请选择工段",
          trigger: "change",
        },
      ],
    },
    {
      label: "工序类型",
      prop: "operationType",
      type: "select",
      search: true,
      dicData: dicts.process_type,
      props: {
        label: "dictLabel",
        value: "dictValue",
      },
      span: 12,
      rules: [
        {
          required: true,
          message: "请选择工序类型",
          trigger: "change",
        },
      ],
    },
    {
      label: "工艺条件",
      prop: "processAsk",
      span: 12,
      rules: [
        {
          required: true,
          message: "工艺条件不能为空",
          trigger: "blur",
        },
      ],
    },
    {
      label: "技能要求",
      prop: "skillAsk",
      span: 12,
      type: "select",
      search: true,
      filterable: true,
      dicData: dicts.skill_requirements,
      props: {
        label: "dictLabel",
        value: "dictValue",
      },
      rules: [
        {
          required: true,
          message: "请选择技能要求",
          trigger: "change",
        },
      ],
    },
    {
      label: "后置时间(分)",
      prop: "forceTime",
      type: "number",
      span: 12,
      rules: [
        {
          required: true,
          message: "后置时间不能为空",
          trigger: "blur",
        },
      ],
    },
    /*{
      label: "标准机时",
      prop: "timeingNum",
      type: "number",
      span: 12,
      rules: [
        {
          required: true,
          message: "标准机时不能为空",
          trigger: "blur",
        },
      ],
    },*/
    {
      label: "标准工时(分)",
      prop: "standardWorktime",
      type: "number",
      span: 12,
      rules: [
        {
          required: true,
          message: "标准工时不能为空",
          trigger: "blur",
        },
      ],
    },
    // {
    //   label: '岗位',
    //   prop: 'type',
    //   type: 'select',
    //   dicData: [
    //     {
    //       label: '岗位1',
    //       value: 'position1',
    //     },
    //   ],
    //   props: {
    //     label: 'label',
    //     value: 'value',
    //   },
    //   span: 12,
    // },
    {
      label: "工位类型",
      prop: "stanType",
      search: true,
      type: "select",
      dicData: dicts.station_type,
      props: {
        label: "dictLabel",
        value: "dictValue",
      },
      span: 12,
      row: true,
      rules: [
        {
          required: true,
          message: "请选择工位类型",
          trigger: "blur",
        },
      ],
    },
    {
      label: "方法",
      prop: "method",
      span: 12,
    },
    {
      label: "试验规程编号",
      prop: "testPlanCode",
      span: 12,
    },
    {
      label: "是否可跳过",
      prop: "skipped",
      span: 8,
      hide: true,
      type: "switch",
      dicData: switchOp,
      value: 0,
    },
    {
      label: "是否关键工序",
      prop: "keyProcesses",
      span: 8,
      type: "switch",
      dicData: switchOp,
      value: 0,
    },
    {
      label: "是否特殊工序",
      prop: "isSpecial",
      span: 8,
      type: "switch",
      dicData: switchOp,
      value: 0,
    },
    {
      label: "是否禁用",
      prop: "enabled",
      hide: true,
      span: 8,
      type: "switch",
      dicData: switchOp,
      value: 0,
    },
    //  {
    //    label: "是否外协",
    //    prop: "externalCooperation",
    //    span: 8,
    // hide: true,
    //    type: "switch",
    //    dicData: switchOp,
    //    value: 0,
    //  },
    /*{
      label: "是否首检",
      prop: "firstCheck",
      span: 8,
      hide: true,
      type: "switch",
      dicData: switchOp,
      value: 0,
    },*/
    /*{
      label: "是否巡检",
      prop: "inspection",
      span: 8,
      hide: true,
      type: "switch",
      dicData: switchOp,
      value: 0,
    },
    {
      label: "是否自检",
      prop: "selfCheck",
      span: 8,
      hide: true,
      type: "switch",
      dicData: switchOp,
      value: 0,
    },*/
    {
      label: "批量报工",
      prop: "batchReport",
      span: 8,
      hide: true,
      type: "switch",
      dicData: switchOp,
      value: 1,
    },
    //  {
    //    label: "是否工艺数量",
    //    prop: "common",
    //    span: 8,
    // hide: true,
    //    type: "switch",
    //    dicData: switchOp,
    //    value: 0,
    //  },
    //  {
    //    label: "是否分批",
    //    prop: "batch",
    //    span: 8,
    // hide: true,
    //    type: "switch",
    //    dicData: switchOp,
    //    value: 0,
    //  },
    {
      label: "是否合批",
      prop: "merge",
      span: 8,
      hide: true,
      type: "switch",
      dicData: switchOp,
      value: 0,
      //联动隐藏
      control: (val, form) => {
        return {
          mergeNum: {
            display: val == 1 ? true : false,
          },
        };
      },
    },
    {
      label: "是否自定义名称",
      prop: "customEnable",
      span: 8,
      hide: true,
      type: "switch",
      dicData: switchOp,
      value: 0,
      //联动隐藏
      control: (val, form) => {
        return {
          customFieldName: {
            display: val == 1 ? true : false,
          },
        };
      },
    },
    {
      label: "自定义工序项目字段名称",
      prop: "customFieldName",
      hide: true,
      span: 24,
    },

    /*{
      label: "是否委外",
      prop: "outsourcing",
      span: 8,
      hide: true,
      type: "switch",
      dicData: switchOp,
      // click: ({ column,value }) => {
      //  if(value == 0){
      // console.log('column',column)
      //  }
      // },
      //联动隐藏
      control: (val, form) => {
        return {
          outTime: {
            display: val == 1 ? true : false,
          },
        };
      },
      value: 0,
    },*/
    {
      label: "合批数量",
      prop: "mergeNum",
      span: 5,
      hide: true,
      display: false,
      value: 0,
    },
    {
      label: "分批数量",
      prop: "batchNum",
      span: 5,
      display: false,
      hide: true,
      value: 0,
      // slot:true, // 自定义列
    },
    {
      label: "委外时间",
      prop: "outTime",
      span: 5,
      display: false,
      hide: true,
      value: 0,
      // slot:true, // 自定义列
    },
    {
      label: "工序描述",
      prop: "operationDesc",
      hide: true,
      span: 24,
      type: "textarea",
    },
    /*{
      label: "备注",
      prop: "remark",
      hide: true,
      span: 24,
      type: "textarea",
    },*/
  ],
});
</script>