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

<template>
  <div class="mainContentBox">
    <avue-crud
        ref="crudRef"
      :option="option"
      v-model:page="page"
      v-model:search="search"
        v-model="form"
      :table-loading="loading"
      :permission="permission"
      @search-change="handleQuery"
      @search-reset="resetQuery"
      @size-change="handleQuery"
      @current-change="handleQuery"
      @row-save="rowSave"
      @row-update="rowUpdate"
      @row-del="rowDel"
      :data="pageData"
    >
      <template #menu-right="{}">
        <el-dropdown split-button v-hasPerm="['plan:order:import']"
          >导入
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="downloadTemplate">
                <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
          class="ml-3"
          v-hasPerm="['plan:order:export']"
          @click="handleExport"
        >
          <template #icon> <i-ep-download /> </template>导出
        </el-button>
      </template>
      <template #menu="{size,row,index}">
        <el-button
            v-hasPerm="[buttonPermission.PLAN.BTNS.order_edit]"
            v-if="row.orderState === '0' ||  row.orderState === '1' ||  row.orderState === '2'"
            type="primary"
            link
            size="small"
            @click="handleEdit(row,0)"
        ><i-ep-edit />编辑
        </el-button>
        <el-button
            v-if="row.nameplated === 1"
            type="info"
            link
            size="small"
            @click="handleNameplated(row)"
        ><i-ep-edit />铭牌
        </el-button>
        <el-button
            v-hasPerm="[buttonPermission.PLAN.BTNS.order_del]"
            v-if="row.orderState === '0' ||  row.orderState === '1' ||  row.orderState === '2'"
            type="danger"
            link
            size="small"
            @click="rowDel(row,0)"
        ><i-ep-edit />删除
        </el-button>
      </template>
    </avue-crud>
    <el-dialog
        v-model="dialog1.visible"
        :title="dialog1.title"
        width="950px"
        @close="dialog1.visible = false"
    >
      <choice-item-page @materialInfo="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"
            action=""
            drag
            accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
            :limit="1"
            :auto-upload="false"
            :file-list="importData.fileList"
            :on-change="handleFileChange"
            :on-exceed="handleFileExceed"
          >
            <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>
  </div>
</template>
<script setup lang="ts">
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,
} from "@/api/order";
import {ref} from "vue";
import ChoiceItemPage from "@/views/base/materials/components/choice-item-page.vue";

// 弹窗对象
const dialog = reactive({
  visible: false,
  type: "order-form",
  width: 800,
  title: "",
});
const search = ref({});
const option = ref({});
const pageData = ref([]);
const form = ref({});
const page = ref({ total: 0, currentPage: 1, pageSize: 10 });
const loading = ref(false);
const uploadRef = ref<UploadInstance>(); // 上传组件
// 导入数据
const importData = reactive({
  file: undefined,
  fileList: [],
});
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 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对象
option.value = {
  border: true,
  searchIndex: 3,
  searchIcon: true,
  editBtn: false,
  delBtn: false,
  searchMenuSpan: 8,
  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: "订单编号不能为空",
          trigger: "trigger",
        },
      ],
    },
    {
      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,
      type: "select", //类型为下拉选择框
      dicUrl:
        dictDataUtil.request_url + dictDataUtil.TYPE_CODE.plan_order_state,
      props: {
        label: "dictLabel",
        value: "dictValue",
      },
      searchClearable: false, //可清空的输入框,默认为true
      filterable: true, //添加filterable属性即可启用搜索功能
    },
    {
      label: "订单类型",
      prop: "orderType",
      type: "select", //类型为下拉选择框
      width: 100,
      overHidden: 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",
        },
      ],
    },
    {
      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",
        },
      ],
    },
    {
      label: "所属公司",
      prop: "companyId",
      width: 100,
      overHidden: true,
      type: "select", //类型为下拉选择框
      dicUrl: import.meta.env.VITE_APP_BASE_API + "/api/v1/sys/dept/orgList",
      props: {
        label: "deptName",
        value: "id",
      },
      rules: [
        {
          required: true,
          message: "请选择所属公司",
          trigger: "trigger",
        },
      ],
    },
    {
      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,
    },
  ],
};

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, index, done, loading) => {
  loading();
  updateOrder(form).then((data: any) => {
    ElMessage({
      message: data.msg,
      type: "success",
    });
    done();
    handleQuery(null, null);
  });
};
const handleNameplated = (row) =>{
  ElMessage.warning("功能开发中")
}
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) => {
  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 downloadTemplate = () => {
  downloadTemplateApi().then((response) => {
    downFile(response);
  });
};
const handleEdit = (row, index) =>{
  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) => {
  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) => {
  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);
});
</script>