JG-ADMIN-TEMP/src/views/device/scrap/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"
    >
      <template #menu-left="{ size }">
        <el-button
          :disabled="toDeleteIds.length < 1"
          type="danger"
          icon="el-icon-delete"
          :size="size"
          @click="multipleDelete"
          >删除</el-button
        >
      </template>
      <template #menu="{ size, row, index }">
        <el-button
          @click="doEdit(row, index)"
          icon="el-icon-edit"
          text
          type="primary"
          :size="size"
          >编辑</el-button
        >
        <el-button
          @click="maintenance(row)"
          icon="el-icon-check"
          text
          v-hasPerm="[ButtonPermKeys.DEVICE.BTNS.disable_process]"
          type="primary"
          :size="size"
          >流程</el-button
        >
        <el-button
          v-if="row.state === 0"
          @click="deleteRow(row)"
          icon="el-icon-delete"
          type="danger"
          size="small"
          >删除</el-button
        >
        <el-button
          icon="el-icon-setting"
          text
          @click="showExcel(row)"
          type="primary"
          >表格填充</el-button
        >
      </template>
    </avue-crud>
    <el-dialog
      v-model="workOderShow"
      :title="updateTitle"
      @close="workOderShow = false"
      width="1600"
    >
      <AddExcelInfo :data="ExDataObj" :rowDatas="rowData" @close="closeShow" />
    </el-dialog>
    <el-dialog
      v-model="dialog1.visible"
      :title="dialog1.title"
      width="750px"
      height="80%"
      @close="dialog1.visible = false"
    >
      <el-timeline style="max-width: 500px; margin-left: 100px">
        <el-timeline-item center type="success" placement="top">
          <el-card>
            <h4>设备报废申请</h4>
            <p>统一编码： {{ maintenanceInfo.deviceNo }}</p>
            <p>设备名称： {{ maintenanceInfo.deviceName }}</p>
            <p>使用年限： {{ maintenanceInfo.deviceLife }}</p>
            <p>报废时间： {{ maintenanceInfo.disableTime }}</p>

            <!--            <p>调拨周期： {{maintenanceInfo.allocateCycle}}天</p>-->
            <p>报废理由： {{ maintenanceInfo.remark }}</p>
            <p>申请人员： {{ maintenanceInfo.creator }}</p>
            <p>申请时间： {{ maintenanceInfo.created }}</p>
          </el-card>
        </el-timeline-item>
        <el-timeline-item
          center
          placement="top"
          :type="
            maintenanceInfo.state === 0
              ? 'primary'
              : maintenanceInfo.state === 0
                ? 'info'
                : 'success'
          "
        >
          <el-card v-if="viewPage">
            <h4>使用经办人</h4>
            <p>审批人员： {{ maintenanceInfo.auditUser }}</p>
            <p>
              审批结果：
              {{
                maintenanceInfo.auditUser
                  ? maintenanceInfo.auditResult === 1
                    ? "通过"
                    : "不通过"
                  : ""
              }}
            </p>
            <p>审批时间： {{ maintenanceInfo.auditTime }}</p>
          </el-card>
          <el-card v-if="!viewPage">
            <h4>使用经办人</h4>
            <el-form
              ref="maintenanceInfoForm"
              :model="maintenanceInfo"
              label-width="auto"
              style="max-width: 400px"
              :rules="rules"
            >
              <el-form-item label="审批意见" prop="auditOpinion">
                <el-input
                  :disabled="maintenanceInfo.state !== 0"
                  type="textarea"
                  :rows="2"
                  v-model="maintenanceInfo.auditOpinion"
                />
              </el-form-item>
              <el-form-item label="审批人员" prop="auditUser">
                <el-input
                  :disabled="maintenanceInfo.state !== 0"
                  v-model="maintenanceInfo.auditUser"
                />
              </el-form-item>
              <el-form-item label="审批结果">
                <el-radio-group
                  :disabled="maintenanceInfo.state !== 0"
                  v-model="maintenanceInfo.auditResult"
                  class="ml-4"
                >
                  <el-radio :value="0">通过</el-radio>
                  <el-radio :value="1">驳回</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item style="margin-left: 45%">
                <el-button
                  type="primary"
                  v-if="maintenanceInfo.state === 0"
                  @click="maintenanceSubmit"
                  >保存</el-button
                >
              </el-form-item>
            </el-form>
          </el-card>
        </el-timeline-item>

        <el-timeline-item
          center
          placement="top"
          :type="
            maintenanceInfo.state === 2
              ? 'primary'
              : maintenanceInfo.state < 2
                ? 'info'
                : 'success'
          "
        >
          <el-card v-if="viewPage">
            <h4>使用部门负责人</h4>
            <p>审批人员： {{ maintenanceInfo.auditUser1 }}</p>
            <p>
              审批结果：
              {{
                maintenanceInfo.auditUser1
                  ? maintenanceInfo.auditResult1 === 1
                    ? "通过"
                    : "不通过"
                  : ""
              }}
            </p>
            <p>审批时间： {{ maintenanceInfo.auditTime1 }}</p>
          </el-card>
          <el-card v-if="!viewPage">
            <h4>使用部门负责人</h4>
            <el-form
              ref="maintenanceInfoForm1"
              v-if="maintenanceInfo.state >= 2"
              :model="maintenanceInfo"
              label-width="auto"
              style="max-width: 400px"
              :rules="rules"
            >
              <el-form-item label="审批意见" prop="auditOpinion1">
                <el-input
                  :disabled="maintenanceInfo.state !== 2"
                  type="textarea"
                  :rows="2"
                  v-model="maintenanceInfo.auditOpinion1"
                />
              </el-form-item>
              <el-form-item label="审批人员" prop="auditUser1">
                <el-input
                  :disabled="maintenanceInfo.state !== 2"
                  v-model="maintenanceInfo.auditUser1"
                />
              </el-form-item>
              <el-form-item label="审批结果">
                <el-radio-group
                  :disabled="maintenanceInfo.state !== 2"
                  v-model="maintenanceInfo.auditResult1"
                  class="ml-4"
                >
                  <el-radio :value="0">通过</el-radio>
                  <el-radio :value="1">驳回</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item style="margin-left: 45%">
                <el-button
                  type="primary"
                  v-if="maintenanceInfo.state === 2"
                  @click="maintenanceSubmit1"
                  >保存</el-button
                >
              </el-form-item>
            </el-form>
          </el-card>
        </el-timeline-item>

        <el-timeline-item
          center
          placement="top"
          :type="
            maintenanceInfo.state === 4
              ? 'primary'
              : maintenanceInfo.state < 4
                ? 'info'
                : 'success'
          "
        >
          <el-card v-if="viewPage">
            <h4>科研生产部</h4>
            <p>审批人员： {{ maintenanceInfo.auditUser1 }}</p>
            <p>
              审批结果：
              {{
                maintenanceInfo.auditUser1
                  ? maintenanceInfo.auditResult1 === 1
                    ? "通过"
                    : "不通过"
                  : ""
              }}
            </p>
            <p>审批时间： {{ maintenanceInfo.auditTime1 }}</p>
          </el-card>
          <el-card v-if="!viewPage">
            <h4>科研生产部</h4>
            <el-form
              ref="maintenanceInfoForm2"
              v-if="maintenanceInfo.state >= 4"
              :model="maintenanceInfo"
              label-width="auto"
              style="max-width: 400px"
              :rules="rules"
            >
              <el-form-item label="审批意见" prop="auditOpinion2">
                <el-input
                  :disabled="maintenanceInfo.state !== 4"
                  type="textarea"
                  :rows="2"
                  v-model="maintenanceInfo.auditOpinion2"
                />
              </el-form-item>
              <el-form-item label="审批人员" prop="auditUser2">
                <el-input
                  :disabled="maintenanceInfo.state !== 4"
                  v-model="maintenanceInfo.auditUser2"
                />
              </el-form-item>
              <el-form-item label="审批结果">
                <el-radio-group
                  :disabled="maintenanceInfo.state !== 4"
                  v-model="maintenanceInfo.auditResult2"
                  class="ml-4"
                >
                  <el-radio :value="0">通过</el-radio>
                  <el-radio :value="1">驳回</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item style="margin-left: 45%">
                <el-button
                  type="primary"
                  v-if="maintenanceInfo.state === 4"
                  @click="maintenanceSubmit2"
                  >保存</el-button
                >
              </el-form-item>
            </el-form>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </el-dialog>
  </div>
  <CommonTable
    ref="ctableRef"
    tableTitle="设备选择"
    tableType="DEVICE"
    @selected-sure="onSelectedFinish"
  />
</template>
<script setup>
import { ref, getCurrentInstance } from "vue";
import { useCrud } from "@/hooks/userCrud";
import ButtonPermKeys from "@/common/configs/buttonPermission";
import { useCommonStoreHook } from "@/store";
import { disableAudit } from "@/api/device";
import proWorkOrderExcel from "./components/proWorkOrderExcel.vue";
import { getProExcel, setExcelDatas } from "@/api/excel";
import AddExcelInfo from "../components/addExcelInfo.vue";
const showExcel = async (row) => {
  await getExcelData(row);
};
const getExcelData = async (row) => {
  const { data, code } = await setExcelDatas("9", row.id);
  if (code == "200") {
    ExDataObj.value = data;
    ExDataObj.value.formType = "9";
    ExDataObj.value.recordId = row.id;
    workOderShow.value = true;
  } else {
    ExDataObj.value = {};
    workOderShow.value = false;
  }
};
const { isShowTable, tableType } = toRefs(useCommonStoreHook());
const ExDataObj = ref({});
const workOderShow = ref(false);
const closeShow = () => {
  workOderShow.value = false;
};
const showProExcel = async (id) => {
  const { data, code } = await getProExcel(id);
  if (code == "200") {
    ExDataObj.value = data;
    workOderShow.value = true;
  } else {
    ExDataObj.value = {};
    workOderShow.value = false;
  }
};
const dialog1 = reactive({
  title: "设备报废申请",
  visible: false,
});
const test = () => {
  isShowTable.value = true;
  tableType.value = tableType.value == 1 ? 2 : 1;
};
const doEdit = (row, index) => {
  row.deviceName2 = row.deviceName;
  crudRef.value && crudRef.value.rowEdit(row, index);
};
// 传入一个url，后面不带/
const { form, data, option, search, page, toDeleteIds, Methords, Utils } =
  useCrud({
    src: "/api/v1/device/disable",
  });
const { dataList, createRow, updateRow, deleteRow, searchChange, resetChange } =
  Methords; //增删改查
const { selectionChange, multipleDelete } = Methords; //选中和批量删除事件
const { checkBtnPerm, downloadTemplate, exportData } = Utils; //按钮权限等工具

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

const rowSelectable = (row, index) => {
  return row.state === 0;
};

onMounted(() => {
  // console.log("crudRef", crudRef)
  search.value.tag = "1";
  dataList();
});
const ctableRef = ref(null);
const onSelectedFinish = (selectedValue) => {
  form.value.deviceName = selectedValue.deviceName;
  form.value.deviceName2 = selectedValue.deviceName;
  form.value.deviceNo = selectedValue.deviceNo;
  form.value.specifications = selectedValue.specifications;
  form.value.manufacturer = selectedValue.brand;
  form.value.originalValue = selectedValue.originalValue;
};
const maintenanceInfo = ref({});
const maintenance = (row) => {
  maintenanceInfo.value = row;
  if (null == maintenanceInfo.value.auditResult) {
    maintenanceInfo.value.auditResult = 0;
  }
  if (null == maintenanceInfo.value.auditResult1) {
    maintenanceInfo.value.auditResult1 = 0;
  }
  if (null == maintenanceInfo.value.auditResult2) {
    maintenanceInfo.value.auditResult2 = 0;
  }
  dialog1.visible = true;
};
const maintenanceSubmit = () => {
  //alert(JSON.stringify(maintenanceInfo.value))
  maintenanceInfoForm.value.validate((isValid, invalidFields) => {
    if (isValid) {
      disableAudit(maintenanceInfo.value).then((data) => {
        ElMessage({
          message: data.msg,
          type: "success",
        });
        dialog1.visible = false;
        dataList();
      });
    }
  });
};

const maintenanceSubmit1 = () => {
  //alert(JSON.stringify(maintenanceInfo.value))
  maintenanceInfoForm1.value.validate((isValid, invalidFields) => {
    if (isValid) {
      maintenanceInfo.value.auditResult = maintenanceInfo.value.auditResult1;
      maintenanceInfo.value.auditOpinion = maintenanceInfo.value.auditOpinion1;
      maintenanceInfo.value.auditUser = maintenanceInfo.value.auditUser1;
      maintenanceInfo.value.auditOpinion = maintenanceInfo.value.auditOpinion1;
      disableAudit(maintenanceInfo.value).then((data) => {
        ElMessage({
          message: data.msg,
          type: "success",
        });
        dialog1.visible = false;
        dataList();
      });
    }
  });
};

const maintenanceSubmit2 = () => {
  //alert(JSON.stringify(maintenanceInfo.value))
  maintenanceInfoForm2.value.validate((isValid, invalidFields) => {
    if (isValid) {
      maintenanceInfo.value.auditResult = maintenanceInfo.value.auditResult2;
      maintenanceInfo.value.auditOpinion = maintenanceInfo.value.auditOpinion2;
      maintenanceInfo.value.auditUser = maintenanceInfo.value.auditUser2;
      maintenanceInfo.value.auditOpinion = maintenanceInfo.value.auditOpinion2;
      disableAudit(maintenanceInfo.value).then((data) => {
        ElMessage({
          message: data.msg,
          type: "success",
        });
        dialog1.visible = false;
        dataList();
      });
    }
  });
};
// 设置表格列或者其他自定义的option
option.value = Object.assign(option.value, {
  searchEnter: true,
  selection: true,
  delBtn: false,
  editBtn: false,
  selectable: rowSelectable,
  column: [
    {
      label: "名称",
      prop: "deviceName",
      search: true,
      overHidden: true,
      editDisplay: false,
      addDisplay: false,
      rules: [
        {
          required: true,
          message: "请输入名称",
          trigger: "blur",
        },
      ],
    },
    {
      label: "名称",
      prop: "deviceName2",
      overHidden: true,
      hide: true,
      viewDisplay: false,
      rules: [
        {
          required: true,
          message: "请输入名称",
          trigger: "blur",
        },
      ],
      click: () => {
        ctableRef.value.startSelect();
      },
    },
    {
      label: "统一编码",
      prop: "deviceNo",
      search: true,
      disabled: true,
      overHidden: true,
    },
    {
      label: "型号",
      prop: "specifications",
      disabled: true,
      overHidden: true,
    },
    {
      label: "使用年限",
      prop: "deviceLife",
      overHidden: true,
    },
    {
      label: "厂家",
      prop: "manufacturer",
      disabled: true,
      overHidden: true,
    },
    {
      label: "净值",
      prop: "netWorth",
      overHidden: true,
    },
    {
      label: "原值",
      prop: "originalValue",
      disabled: true,
      overHidden: true,
    },
    {
      label: "报废时间",
      prop: "disableTime",
      type: "date",
      width: 100,
      overHidden: true,
      format: "YYYY-MM-DD", //前端展示格式
      valueFormat: "YYYY-MM-DD", //设置后端接收的日期格式
      rules: [
        {
          required: true,
          message: "请选择报废日期",
          trigger: "trigger",
        },
      ],
    },
    {
      label: "报废理由",
      prop: "remark",
      span: 24,
      type: "textarea",
      overHidden: true,
      rules: [
        {
          required: true,
          message: "请输入报废理由",
          trigger: "blur",
        },
      ],
    },
    {
      label: "申请人",
      prop: "creator",
      overHidden: true,
      display: false,
    },
    {
      label: "申请时间",
      prop: "created",
      overHidden: true,
      display: false,
    },
    {
      label: "类型",
      prop: "tag",
      overHidden: true,
      display: false,
      hide: true,
      value: "1",
    },
    {
      label: "状态",
      prop: "state",
      display: false,
      overHidden: true,
      width: 160,
      type: "select",
      dicData: [
        { label: "待使用部门经办人审核", value: 0 },
        { label: "驳回", value: 1 },
        { label: "待使用部门负责人审核", value: 2 },
        { label: "驳回", value: 3 },
        { label: "待科研生产部审核", value: 4 },
        { label: "驳回", value: 5 },
        { label: "已完成", value: 6 },
      ],
    },
  ],
});
</script>