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

<template>
  <div class="mainContentBox">
    <avue-crud
        ref="crudRef"
        v-model="form"
        v-model:page="page"
        v-model:search="search"
        :data="pageData"
        :option="option"
        :permission="permission"
        :table-loading="loading"
        :row-style="tableRowClassName"
        @search-change="handleQuery"
        @search-reset="resetChange"
        @size-change="handleQuery"
        @current-change="handleQuery"
        @row-save="rowSave"
        @row-update="rowUpdate"
        @row-del="rowDel"
    >
      <template #menu-left="{ size }">
        <el-button type="primary"  icon="el-icon-plus" @click="handleAdd">新增</el-button>
<!--        <el-button type="primary" @click="scan">扫码导入</el-button>
        <el-button type="primary" @click="test">测试数据</el-button>-->
      </template>
      <template #menu-right="{}">
        <el-dropdown v-hasPerm="['plan:order:import']" split-button
        >导入
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="downloadTemplateExcel">
                <i-ep-download />
                下载模板
              </el-dropdown-item>
              <el-dropdown-item @click="openDialog('obj-import')">
                <i-ep-top />
                导入数据
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <el-button
            v-hasPerm="['plan:order:export']"
            class="ml-3"
            @click="handleExport"
        >
          <template #icon>
            <i-ep-download />
          </template>
          导出
        </el-button>
      </template>
      <template #menu="{ size, row, index }">
        <el-button
            v-if="
            row.orderState === '0' ||
            row.orderState === '1' ||
            row.orderState === '2' ||
            row.orderState === '3'
          "
            v-hasPerm="[buttonPermission.PLAN.BTNS.order_edit]"
            link
            size="small"
            type="primary"
            @click="handleEdit(row, 0)">
          <i-ep-edit />
          编辑
        </el-button>
        <el-button
            v-if="
            row.orderState === '0' ||
            row.orderState === '1' ||
            row.orderState === '2'
          "
            v-hasPerm="[buttonPermission.PLAN.BTNS.order_del]"
            link
            size="small"
            type="danger"
            @click="rowDel(row, 0)"
        >
          <i-ep-delete />
          删除
        </el-button>
<!--        <el-button
            v-if="row.orderState == '5'"
            size="small"
            type="primary"
            @click="handleScanCode(row.id)"
        >二维码生成
        </el-button>-->
        <el-button
            icon="el-icon-notebook"
            text
            v-if="row.orderState === '5' && row.packageUrl === '0'"
            @click="zipData(row.orderCode)"
            type="primary"
            v-hasPerm="[buttonPermission.PLAN.BTNS.order_data]"
            :size="size"
        >生成数据包</el-button
        >
        <el-button
            icon="el-icon-download"
            text
            v-if="row.orderState === '5' && row.packageUrl !== '0'"
            @click="downloadTemplate('/api/v1/plan/order/zip/' + row.id)"
            type="primary"
            v-hasPerm="[buttonPermission.PLAN.BTNS.order_downLoad]"
            :size="size"
        >下载数据包</el-button
        >
      </template>
    </avue-crud>
    <el-dialog
        v-model="dialog1.visible"
        :title="dialog1.title"
        width="950px"
        @close="dialog1.visible = false"
    >
      <choice-item-page @material-info="materialInfo" />
    </el-dialog>
    <el-dialog
        v-model="dialog.visible"
        :title="dialog.title"
        width="500px"
        @close="closeDialog"
    >
      <el-form
          v-if="dialog.type === 'obj-import'"
          :model="importData"
          label-width="100px"
      >
        <el-form-item label="Excel文件">
          <el-upload
              ref="uploadRef"
              :auto-upload="false"
              :file-list="importData.fileList"
              :limit="1"
              :on-change="handleFileChange"
              :on-exceed="handleFileExceed"
              accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
              action=""
              drag
          >
            <el-icon class="el-icon--upload">
              <i-ep-upload-filled />
            </el-icon>
            <div class="el-upload__text">
              将文件拖到此处，或
              <em>点击上传</em>
            </div>
            <template #tip>
              <div style="color: red">文件类型: xls/xlsx</div>
            </template>
          </el-upload>
        </el-form-item>
      </el-form>
      <!-- 弹窗底部操作按钮 -->
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="handleSubmit">确 定</el-button>
          <el-button @click="closeDialog">取 消</el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog
        v-model="dialog2.visible"
        :title="dialog2.title"
        width="950px"
        @close="
        dialog2.visible = false;
        scanArray = [];
        scanCpArray = [];
      "
    >
      <el-input
          v-model="scanCode"
          placeholder="请扫码"
          style="padding: 20px"
          @keyup.enter="scanFnc"
      />

      <div class="scanInfo">
        <el-scrollbar class="scrollbar">
          <div v-for="(item, index) in scanArray" :key="index" class="item">
            <div class="text">扫码Cp: {{ item.cp }}</div>
            <div class="text" @click="deleteItem(index)">
              <el-icon>
                <Delete />
              </el-icon>
            </div>
          </div>
          <div v-if="scanArray.length < 1">暂无数据</div>
        </el-scrollbar>
        <div class="bottombtn">
          <el-button
              :disabled="scanArray.length < 1"
              type="primary"
              @click="scanSubmit"
          >生 成
          </el-button>
        </div>

        <!-- <vue-qrcode value="1241421gaga" size="45" error-level="H" /> -->
      </div>
    </el-dialog>
    <el-dialog
        v-model="dialog3.visible"
        :title="dialog3.title"
        width="950px"
        @close="
        dialog3.visible = false;
        scanCodeArray = [];
      "
    >
      <div class="scanInfo">
        <div style="padding: 0 20px; text-align: center">
          二维码数量:{{ scanCodeArray.length }}
        </div>
        <el-scrollbar class="scrollbarA">
          <div
              :style="
              scanCodeArray.length == 1 ? '   justify-content: center;' : ''
            "
              class="box"
          >
            <div
                v-for="(item, index) in scanCodeArray"
                :key="index"
                class="scancodeitem"
            >
              <div class="qrcodeItem">
                <vue-qrcode :value="item" error-level="low" size="70" />
              </div>
            </div>
          </div>

          <div v-if="scanCodeArray.length < 1">暂无数据</div>
        </el-scrollbar>
      </div>
    </el-dialog>
    <CommonTable
        ref="ctableRef"
        tableTitle="报故单"
        tableType="FAULT"
        @selected-sure="onSelectedFinish"
    />
  </div>
</template>
<script lang="ts" setup>
import { checkPerm } from "@/directive/permission";
import type { UploadInstance } from "element-plus";
import { genFileId } from "element-plus";
import dictDataUtil from "@/common/configs/dictDataUtil";
import buttonPermission from "@/common/configs/buttonPermission";
import {
  addOrder,
  deleteOrders,
  downloadTemplateApi,
  exportOrder,
  getOrderPage,
  importOrder,
  updateOrder,
  getExpandAlias,
  scanImport,
  getScanCode,
  getTestCode,
} from "@/api/order";
import { ref } from "vue";
import _ from "lodash-es";
import ChoiceItemPage from "@/views/base/materials/components/choice-item-page.vue";
import { zipOrder } from "../../../api/order";
import { useCrud } from "../../../hooks/userCrud";

const { Utils } = useCrud({
  src: "/api/v1/plan/order",
});
const { downloadTemplate } = Utils; //按钮权限等工具
// 弹窗对象
const dialog = reactive({
  visible: false,
  type: "order-form",
  width: 800,
  title: "",
});
const ctableRef = ref(null);
const search = ref({});
const option = ref({});
const pageData = ref([]);
const loading = ref(false);
const form = ref({});
const page = ref({ total: 0, currentPage: 1, pageSize: 10 });
const uploadRef = ref<UploadInstance>(); // 上传组件
const resetChange = () => {
  handleQuery(null, null);
};
// 导入数据
const importData = reactive({
  file: undefined,
  fileList: [],
});
const tableRowClassName = ({ row, rowIndex }) => {
  const currentDate = new Date(); // 获取当前日期
  const compareDate = new Date(row.deliverTime); // 设置要比较的日期
  if (currentDate > compareDate && row.orderState !== '5') {
    return { backgroundColor: '#F1BFBFFF'};
  }
  return '';
};
const materialInfo = (value) => {
  form.value.materialCode = value.materialCode;
  form.value.materialName = value.materialName;
  form.value.materialModel = value.spec;
  dialog1.visible = false;
};
const dialog1 = reactive({
  title: "物料选择",
  visible: false,
});
const dialog2 = reactive({
  title: "扫码导入",
  visible: false,
});
const dialog3 = reactive({
  title: "二维码详情",
  visible: false,
});
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 zipOder = ref({});
const zipData = (orderCode) => {
  loading.value = true;
  zipOder.value.orderCode = orderCode;
  zipOrder(zipOder.value).then((data) => {
    if (data.code === "200") {
      loading.value = false;
      ElMessage.success(data.msg);
      handleQuery(null, null);
    } else {
      loading.value = false;
      ElMessage.error(data.msg);
    }
  });
};
const crudRef = ref(null); //crudRef.value 获取avue-crud对象
option.value = {
  border: true,
  searchIndex: 3,
  searchIcon: true,
  editBtn: false,
  addBtn: false,
  delBtn: false,
  searchMenuSpan: 8,
  labelWidth: 100,
  align: "center",
  menuAlign: "center",
  search: true,
  refreshBtn: false,
  from: {
    width: "300",
  },
  column: [
    {
      label: "订单编号",
      prop: "orderCode",
      search: true,
      width: 130,
      overHidden: true,
      display: false,
    },
    {
      label: "订单名称",
      prop: "orderName",
      search: true,
      width: 150,
      overHidden: true,
      rules: [
        {
          required: true,
          message: "订单名称不能为空",
          trigger: "trigger",
        },
      ],
    },
    {
      label: "ERP单号",
      prop: "erpCode",
      search: true,
      width: 130,
      overHidden: true,
      rules: [
        {
          required: true,
          message: "ERP单号不能为空",
          trigger: "trigger",
        },
      ],
    },
    {
      label: "订单类型",
      prop: "orderType",
      type: "select", //类型为下拉选择框
      width: 100,
      overHidden: true,
      editDisabled: true,
      dicUrl: dictDataUtil.request_url + dictDataUtil.TYPE_CODE.plan_order_type,
      props: {
        label: "dictLabel",
        value: "dictValue",
      },
      searchClearable: false, //可清空的输入框,默认为true
      filterable: true, //添加filterable属性即可启用搜索功能
      rules: [
        {
          required: true,
          message: "订单类型不能为空",
          trigger: "trigger",
        },
      ],
      change: ({ value, column ,row}) => {
        option.value.column.forEach((item) => {
          if(value === "2"){
            if (item.prop == "trackingNumber") {
              item.display = true;
            }
            if (item.prop == "materialCode" || item.prop == "orderNum") {
              item.disabled = true;
            }
          }else if(value === "1"){
            if (item.prop == "trackingNumber") {
              item.display = false;
            }
            if (item.prop == "materialCode" || item.prop == "orderNum") {
              item.disabled = false;
            }
          }
          if(item.tagStr === 1 && (item.prop == "materialCode" || item.prop == "orderNum")){
            delete item.disabled;
            delete item.disabled
          }
        });
      },
    },
    {
      label: "报故单",
      prop: "trackingNumber",
      width: 100,
      display: false,
      click: ({ value, column }) => {
        if (ctableRef.value) {
          ctableRef.value.startSelect();
        }
      },
      rules: [
        {
          required: true,
          message: "报故单不能为空",
          trigger: "change",
        },
      ],
    },
    {
      label: "报故单id",
      prop: "faultId",
      width: 100,
      display: false,
      hide: true,
    },
    {
      label: "物料编码",
      prop: "materialCode",
      search: true,
      width: 130,
      overHidden: true,
      rules: [
        {
          required: true,
          message: "订单编号不能为空",
          trigger: "trigger",
        },
      ],
      click: ({ value, column }) => {
        if (column.boxType) {
          dialog1.visible = true;
        }
      },
    },
    {
      label: "产品名称",
      prop: "materialName",
      search: true,
      width: 130,
      overHidden: true,
      rules: [
        {
          required: true,
          message: "产品名称不能为空",
          trigger: "trigger",
        },
      ],
      disabled: true,
    },
    {
      label: "产品规格",
      width: 130,
      overHidden: true,
      disabled: true,
      prop: "materialModel",
    },
    {
      label: "订单状态",
      prop: "orderState",
      display: false,
      width: 100,
      overHidden: true,
      search: true,
      type: "select", //类型为下拉选择框
      dicUrl: dictDataUtil.request_url + dictDataUtil.TYPE_CODE.plan_order_state,
      props: {
        label: "dictLabel",
        value: "dictValue",
      },
      searchClearable: false, //可清空的输入框,默认为true
      filterable: true, //添加filterable属性即可启用搜索功能
    },
    {
      label: "产品型号",
      width: 130,
      overHidden: true,
      prop: "assemblyName",
    },
    {
      label: "部件号",
      width: 130,
      overHidden: true,
      prop: "assemblyCode",
    },
    {
      label: "生产数量",
      prop: "orderNum",
      type: "number",
      width: 100,
      overHidden: true,
      min: 1,
      max: 99999,
      rules: [
        {
          required: true,
          message: "生产数量不能为空",
          trigger: "trigger",
        },
      ],
    },
    {
      label: "排产数量",
      prop: "scheduledNum",
      width: 100,
      overHidden: true,
      display: false,
    },
    {
      label: "优先级",
      prop: "priority",
      width: 100,
      overHidden: true,
      type: "select", //类型为下拉选择框
      dicUrl:
          dictDataUtil.request_url + dictDataUtil.TYPE_CODE.plan_order_priority,
      props: {
        label: "dictLabel",
        value: "dictValue",
      },
      searchClearable: false, //可清空的输入框,默认为true
      filterable: true, //添加filterable属性即可启用搜索功能
      rules: [
        {
          required: true,
          message: "订单类型不能为空",
          trigger: "trigger",
        },
      ],
    },
    {
      label: "交付日期",
      prop: "deliverTime",
      type: "date",
      width: 100,
      overHidden: true,
      format: "YYYY-MM-DD", //前端展示格式
      valueFormat: "YYYY-MM-DD", //设置后端接收的日期格式
      rules: [
        {
          required: true,
          message: "请选择交付日期",
          trigger: "trigger",
        },
      ],
      disabledDate(time) {
        return time.getTime() < new Date().setDate(new Date().getDate() - 1);
      },
    },
    {
      label: "项目号",
      width: 100,
      overHidden: true,
      prop: "projectCode",
    },
    {
      label: "绑定铭牌",
      prop: "nameplated",
      width: "100",
      type: "radio", //类型为单选框
      dicData: [
        {
          label: "否",
          value: 0,
        },
        {
          label: "是",
          value: 1,
        },
      ],
      value: 0,
    },
    {
      label: "备注",
      prop: "remark",
      width: 100,
      overHidden: true,
      minRows: 2, //最小行/最小值
      type: "textarea", //类型为多行文本域框
      maxlength: 512, //最大输入长度
    },
    {
      label: "创建时间",
      prop: "created",
      width: "140",
      overHidden: true,
      display: false,
      type: "datetime",
      valueFormat: "yyyy-MM-dd HH:mm:ss",
    },
    {
      label: "创建人",
      prop: "creator",
      display: false,
      width: 80,
      overHidden: true,
    },
  ],
};

function useScanCode() {
  const scanCodeArray = ref([]);
  const test = async () => {
    const { data, code } = await getTestCode();
    let data1 = [];
    data1.push(JSON.stringify(data[0]));
    scanCodeArray.value = data1;
    dialog3.visible = true;
  };
  const handleScanCode = async (id: string) => {
    const { data, code } = await getScanCode(id);
    scanCodeArray.value = data;
    dialog3.visible = true;
  };
  return { scanCodeArray, handleScanCode, test };
}

const { scanCodeArray, handleScanCode, test } = useScanCode();

//扫码板块

function useScan() {
  const scanCode = ref("");
  const scanArray = ref([]);
  const scanCpArray = ref([]);
  const scanStatus = ref(false);
  const deleteItem = (index: any) => {
    scanArray.value.splice(index, 1);
  };
  const scan = () => {
    dialog2.visible = true;
  };
  const scanFnc = () => {
    if (scanCode.value) {
      let obj = {};
      obj = JSON.parse(scanCode.value);
      if (!_.includes(scanCpArray.value, obj.cp)) {
        scanArray.value.push(obj);
        scanCpArray.value.push(obj.cp);
        ElMessage.success("扫码成功");
      } else {
        ElMessage.error("请勿重复扫码");
      }
      //判定是否重复扫码
    } else {
      ElMessage.error("请正确扫码");
    }
    scanCode.value = "";
  };
  const scanSubmit = async () => {
    const { data, code } = await scanImport({
      planOrderImportList: scanArray.value,
    });
    if (code == "200") {
      ElMessage.success("导入成功！");
      dialog2.visible = false;
      scanArray.value = [];
      scanCpArray.value = [];
      handleQuery(null, null);
    }
  };
  return {
    scanCode,
    scanArray,
    scanCpArray,
    scanStatus,
    scan,
    scanFnc,
    deleteItem,
    scanSubmit,
  };
}

const {
  scanCode,
  scanArray,
  scanCpArray,
  scanStatus,
  scanSubmit,
  scan,
  scanFnc,
  deleteItem,
} = useScan();
const queryExpandAlias = () => {
  getExpandAlias(dictDataUtil.EXPAND_FIELD_TABLE.plan_order_info).then(
      (data: any) => {
        if (data.data) {
          data.data.forEach((item: any) => {
            option.value.column.push({
              label: item.label,
              prop: item.field,
              width: 100,
              overHidden: true,
            });
          });
        }
      }
  );
};

const handleQuery = (params, done) => {
  // console.log(JSON.stringify(option.value.column));
  loading.value = true;
  const querySearch = {
    pageSize: page.value.pageSize,
    pageNo: page.value.currentPage,
    ...params,
  };
  getOrderPage(querySearch)
      .then(({ data }) => {
        pageData.value = data.records;
        page.value.total = data.totalCount;
        page.value.currentPage = data.pageNo;
        page.value.pageSize = data.pageSize;
      })
      .finally(() => {
        loading.value = false;
        if (done) {
          done();
        }
      });
};
const resetQuery = () => {};
const rowSave = (form, done, loading) => {
  loading();
  addOrder(form).then((data: any) => {
    ElMessage({
      message: data.msg,
      type: "success",
    });
    done();
    handleQuery(null, null);
  });
};
const rowUpdate = (form: any, index: any, done: any, loading: any) => {
  loading();
  updateOrder(form).then((data: any) => {
    ElMessage({
      message: data.msg,
      type: "success",
    });
    done();
    handleQuery(null, null);
  });
};

const rowDel = (form: any, index) => {
  ElMessageBox.confirm("当前操作会删除数据,你确认要继续吗?")
      .then(() => {
        deleteOrders([form.id])
            .then((data: any) => {
              ElMessage({
                message: data.msg,
                type: "success",
              });
              handleQuery(null, null);
            })
            .finally(() => {});
      })
      .catch(() => {
        // catch error
      });
};
const openDialog = (type: any) => {
  dialog.visible = true;
  dialog.type = type;
  if (dialog.type === "obj-import") {
    // 导入弹窗
    dialog.title = "数据导入";
    dialog.width = 600;
  }
};
const closeDialog = () => {
  dialog.visible = false;
  if (dialog.type === "obj-import") {
    importData.file = undefined;
    importData.fileList = [];
  }
};
const downloadTemplateExcel = () => {
  if (window.openHarmonyBridge) {
    //适配鸿蒙下载
    window.openHarmonyBridge.download(
        JSON.stringify({
          path: "/api/v1/plan/order/template",
          token: localStorage.getItem("token"),
          method: "get",
          data: { code: 1234, erp: "kkkk" },
        })
    );
  } else {
    downloadTemplateApi().then((response) => {
      downFile(response);
    });
  }
};
const handleAdd = () => {
  option.value.column.forEach((item)=>{
    item.tagStr = 0;
  })
  crudRef.value && crudRef.value.rowAdd();
};
const handleEdit = (row: any, index: any) => {
  option.value.column.forEach((item)=>{
    item.tagStr = 0;
    if(row.orderState === '3'){
      item.tagStr = 1;
      if(item.prop === 'deliverTime'){
        item.editDisabled = false
      }else{
        item.editDisabled = true
      }
    }else{
      item.editDisabled = false
    }
  })
  crudRef.value && crudRef.value.rowEdit(row, index);
};
/** 弹窗提交 */
const handleSubmit = () => {
  importOrder(importData).then((data: any) => {
    ElMessage({
      message: data.msg,
      type: "success",
    });
    dialog.visible = false;
    handleQuery(null, null);
  });
};
/** Excel文件 Change */
const handleFileChange = (file: any) => {
  importData.file = file.raw;
};
/** 文件下载 */
const downFile = (response: any) => {
  const fileData = response.data;
  const fileName = decodeURI(
      response.headers["content-disposition"].split(";")[1].split("=")[1]
  );
  const fileType =
      "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8";
  const blob = new Blob([fileData], { type: fileType });
  const downloadUrl = window.URL.createObjectURL(blob);
  const downloadLink = document.createElement("a");
  downloadLink.href = downloadUrl;
  downloadLink.download = fileName;
  document.body.appendChild(downloadLink);
  downloadLink.click();
  document.body.removeChild(downloadLink);
  window.URL.revokeObjectURL(downloadUrl);
};
/** Excel文件 Exceed  */
const handleFileExceed = (files: any) => {
  uploadRef.value!.clearFiles();
  const file = files[0];
  file.uid = genFileId();
  uploadRef.value!.handleStart(file);
  importData.file = file;
};
/** 导出 */
const handleExport = () => {
  exportOrder(search.value).then((response: any) => {
    downFile(response);
  });
};
onMounted?.(() => {
  queryExpandAlias();
  handleQuery(null, null);
});

/** 选择报故单 */
const onSelectedFinish = (selectedValue) => {
  form.value.materialCode = selectedValue.materialCode;
  form.value.materialName = selectedValue.materialName;
  form.value.materialModel = selectedValue.spec;
  form.value.faultId = selectedValue.id;
  form.value.trackingNumber = selectedValue.trackingNumber;
  form.value.orderNum = selectedValue.unqualifiedNum;
};
</script>

<style lang="scss" scoped>
.warning-row{
  background-color: rgb(204, 136, 136) !important;
}
.scanInfo {
  width: 100%;

  .scrollbar {
    padding: 20px;
    height: 350px;

    .item {
      margin: 20px 0;
      width: 100%;
      background-color: #80808030;
      border-radius: 16px;
      height: 60px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 20px;

      .el-icon {
        width: 50px;
        height: 50px;
        color: red;
        cursor: pointer;
      }
    }

    .scancodeitem {
      width: 300px;
      height: 300px;
      margin: 0 20px;
      display: inline-block;
      border-radius: 16px;
      border: 1px solid black;
      padding-top: 10px;

      .qrcodeItem {
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }

  .bottombtn {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .scrollbarA {
    padding: 20px;
    height: 350px;

    .box {
      display: flex;
      align-items: center;

      .item {
        margin: 20px 0;
        width: 100%;
        background-color: #80808030;
        border-radius: 16px;
        height: 60px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 20px;

        .el-icon {
          width: 50px;
          height: 50px;
          color: red;
          cursor: pointer;
        }
      }

      .scancodeitem {
        width: 300px;
        height: 300px;
        margin: 0 20px;
        display: inline-block;
        border-radius: 16px;
        border: 1px solid black;
        padding-top: 10px;

        .qrcodeItem {
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }
  }
}
</style>