smart-om-web/src/views/smart/workorderDetail.vue

<template>
  <basic-container>
    <template>
      <el-row :span="24">
        <div class="check_status_class">
       <span>
        <el-col >
          审核状态:
             <avue-input v-model="form" placeholder="" class="frame_class1" style = "width: 100px"></avue-input>
        </el-col>
        </span>
        </div>
      </el-row>
    </template>
    <avue-tabs :option="option"></avue-tabs>
    <span v-if="type.prop==='information'">
        <avue-form :option="tab1_option"
                   v-model="tab1_form"
                   ref="tab1_form"
                   :class="frame_class">
        </avue-form>
      </span>
    <div class="container">
       <span>
          <el-button size="small" @click="back">取消</el-button>
          <el-button type="primary" size="small" @click="handleFormSubmit" v-if="addupdateShowButton && permission.workorder_add">确定</el-button>
          <el-button type="primary" size="small" @click="auditing" v-if="shouldShowButton && permission.workorder_audit">审核</el-button>
          <el-button type="primary" size="small" @click="reject" v-if="shouldShowButton && permission.workorder_reject">驳回</el-button>
          <el-button type="primary" size="small" @click="seachToUpdate" v-if="shouldShowButton && permission.workorder_edit">修改</el-button>
          <el-button type="primary" size="small" @click="del" v-if="shouldShowButton && permission.workorder_delete">删除</el-button>
       </span>
    </div>
  </basic-container>
</template>
<script>
  import {getDetail, add, update, remove} from "@/api/smart/workorder";
  import {mapGetters} from "vuex";

  export default {
    name: "operationticketDetail",
    data() {
      return {
        frame_class: '',
        type: {},
        shouldShowButton: {},
        addupdateShowButton: {},
        readonlyForm: {},
        updateShowButton: {},
        optionCheckStatus: [{
          value: 1,
          label: '审核中'
        }, {
          value: 2,
          label: '已审核'
        }, {
          value: 3,
          label: '未通过'
        }, {
          value: 4,
          label: ''
        }],
        item_form: {},
        option: {
          column: [{
            label: '基本信息',
            prop: 'information',
          }
          ]
        },

        tab1_form: {},
        tab1_option: {
          submitBtn: false,
          emptyBtn: false,
          column: [
            {
              label: 'KKS编码',
              prop: 'equipmentLedgerId',
              type: 'select',
              remote: true,
              search: true,
              loadingText: '加载中',
              placeholder: '请输入KKS编码',
              props: {
                label: 'kksEncoding',
                value: 'id'
              },
              rules: [{
                required: true,
                message: "请输入KKS编码",
                trigger: "blur"
              }],
              span: 8,
              dicUrl: "/api/equipmentledger/listByCoding?coding={{key}}",
              dicFormatter: (res) => {
                if (res) {
                  this.equipmentOptions = res.data;
                  console.log(res.data)
                  return res.data;
                }
                return [];
              },
              event: {
                change: (val) => {
                  if (this.addupdateShowButton) {
                    this.tab1_form.kksDescriptdion = '';
                    this.tab1_form.station = '';
                    if (val) {
                      if (this.equipmentOptions.length > 0) {
                        var selectedOption = this.equipmentOptions.find(option => option.id === val);
                        this.tab1_form.kksDescription = selectedOption ? selectedOption.kksDescription : '';
                        this.tab1_form.station = selectedOption ? selectedOption.station : '';
                      }
                    }
                  }
                },
              },
            }, {
              label: "KKS描述",
              prop: "kksDescription",
              type: 'textarea',
              minRows: 1,
              maxRows: 3,
              rules: [{
                required: true,
                message: "请输入KKS描述",
                trigger: "blur"
              }],
              // offset:6,
              span: 8,
              maxlength: 400,
              disabled: true
            }, {
              label: "场站",
              prop: "station",
              type: "select",
              span: 8,
              dicUrl: "/api/daf-system/dict/dictionary?code=station",
              props: {
                label: "dictValue",
                value: "dictKey"
              },
              rules: [{
                required: true,
                message: "请选择场站",
                trigger: "blur"
              }],
              disabled: true
            }, {
              label: "工单编号",
              prop: "workOrderNo",
              span: 8,
              rules: [{
                required: true,
                message: "请输入工单编号",
                trigger: "blur"
              }]
            }, {
              label: "工单类型",
              prop: "workOrderType",
              type: "select",
              span: 8,
              dicUrl: "/api/daf-system/dict/dictionary?code=workorder_type",
              props: {
                label: "dictValue",
                value: "dictKey"
              },
              rules: [{
                required: true,
                message: "请输入工单类型",
                trigger: "blur"
              }]
            }, {
              label: "内容描述",
              prop: "description",
              type: 'textarea',
              minRows: 1,
              maxRows: 3,
              span: 8,
              maxlength: 400
            }, {
              label: "责任人",
              prop: "managerUserId",
              type: 'select',
              loadingText: '加载中',
              placeholder: '请输入用户编号或名称',
              remote: true,
              search: true,
              props: {
                label: 'name',
                value: 'id',
                desc: 'code'
              },
              dicUrl: "/api/daf-user/listBySearch?search={{key}}",
              span: 8,
              rules: [{
                required: true,
                message: "请选择负责人",
                trigger: "blur"
              }]
            }, {
              label: "责任班组",
              prop: "responsibilityTeam",
              span: 8,
              rules: [{
                required: true,
                message: "请输入责任班组",
                trigger: "blur"
              }]
            }, {
              label: "计划工厂",
              prop: "plannedFactory",
              span: 8,
              rules: [{
                required: true,
                message: "请输入计划工厂",
                trigger: "blur"
              }]
            }, {
              label: "维护作业类型",
              prop: "maintenanceTaskType",
              type: 'textarea',
              minRows: 1,
              maxRows: 3,
              span: 8,
              maxlength: 400
            }, {
              label: "用户状态",
              prop: "userStatus",
              type: "select",
              span: 8,
              dicUrl: "/api/daf-system/dict/dictionary?code=user_status",
              props: {
                label: "dictValue",
                value: "dictKey"
              },
              rules: [{
                required: true,
                message: "请输入用户状态",
                trigger: "blur"
              }]
            }, {
              label: "发生时间",
              prop: "occurrenceTime",
              type: 'datetime',
              span: 8,
              rules: [{
                required: true,
                message: "请输入发生时间",
                trigger: "blur"
              }]
            }, {
              label: "执行班组",
              prop: "taskTeam",
              span: 8,
              rules: [{
                required: true,
                message: "请输入执行班组",
                trigger: "blur"
              }]
            }, {
              label: "处理时间",
              prop: "processingTime",
              type: 'datetime',
              span: 8
            }, {
              label: "处理过程描述",
              type: 'textarea',
              prop: "processDescription",
              minRows: 1,
              maxRows: 3,
              span: 8,
              maxlength: 400
            }, {
              label: "结束时间",
              prop: "endTime",
              type: 'datetime',
              span: 8
            }, {
              label: "处理结果",
              prop: "handlingResult",
              type: 'textarea',
              minRows: 1,
              maxRows: 3,
              span: 8,
              maxlength: 400
            },

          ]
        },
        item_data: [],
        equipmentOptions: [],
      }
    },
    computed: {
      ...mapGetters(["permission"]),
      permissionList() {
        return {
          addBtn: true,
          viewBtn: false,
          delBtn: true,
          editBtn: true
        };
      },
    },
    created() {
      this.type = this.option.column[0];
      if (this.$route.query.frameMode == "add") {
        this.tab1_option.column[1].disabled = true;
        this.tab1_option.column[2].disabled = true;
        this.readonlyForm = false;
        this.shouldShowButton = false;
        this.addupdateShowButton = true;
        this.frame_class = null;
        this.searchDetail();
      } else if (this.$route.query.frameMode == "search") {
        this.tab1_option.column[1].disabled = false;
        this.tab1_option.column[2].disabled = false;
        this.readonlyForm = true;
        this.shouldShowButton = true;
        this.addupdateShowButton = false;
        this.frame_class = 'frame_class1';
        this.searchDetail();
      }
    },
    methods: {
      handleFormSubmit() {
        const form = this.$refs.tab1_form;
        form.validate((valid) => {
          if (valid) {
            this.submitForm();
          } else {
            this.$message({
              type: "warning",
              message: "请输入必要信息!"
            });
          }
        });
      },
      back() {
        if (this.$route.query.frameMode == "add") {
          this.$router.push({path: "/smart/workorder"});
        } else {
          this.updateToSearch();
          this.$router.push({path: "/smart/workorder"});
        }
      },
      updateToSearch() {
        this.tab1_option.column[1].disabled = false;
        this.tab1_option.column[2].disabled = false;
        this.readonlyForm = true;
        this.shouldShowButton = true;
        this.addupdateShowButton = false;
        this.updateShowButton = false;
        this.frame_class = 'frame_class1';
      },
      searchDetail() {
        getDetail(this.$route.query.id).then(res => {
          this.tab1_form = res.data.data;
          switch (this.tab1_form.approvalStatus){
            case 1:
              this.form = "审核中";
              break;
            case 2:
              this.form = "已审核";
              break;
            case 3:
              this.form = "未通过";
              break;
            default:
              this.form =" ";
          }
        });
      },
      submitForm() {
        if (this.$route.query.frameMode == "add") {
          this.$confirm("是否新增所填数据?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(() => {
            this.tab1_form.approvalStatus = 1;
            add(this.tab1_form).then(() => {
              this.$router.push({
                path: "/smart/workorder",
                query: {},
              });
              this.$message({
                type: "success",
                message: "操作成功!"
              });
            }).catch((error) => {
              console.log(error);
              this.$message({
                type: "error",
                message: "操作失败!"
              });
            });
          });
        } else {
          this.$confirm("是否修改所填数据?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(() => {
            update(this.tab1_form).then(() => {
              this.$router.push({
                path: "/smart/workorder",
                query: {},
              });
              this.$message({
                type: "success",
                message: "操作成功!"
              });
            }).catch((error) => {
              console.log(error);
              this.$message({
                type: "error",
                message: "操作失败!"
              });
            });
          });
        }
      },
      getOptionCheckStatusLabel(value) {
        const status = this.optionCheckStatus.find(option => option.value === value);
        return status ? ' 审核状态: ' + status.label : '';
      },
      auditing() {
        this.$confirm("是否将数据审核?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          this.submitRejectOrauditing('2');
        });
      },
      reject() {
        this.$confirm("是否将数据审核?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          this.submitRejectOrauditing('3');
        });
      },
      submitRejectOrauditing(status) {
        var formData = {id: this.tab1_form.id, approvalStatus: status};
        update(formData).then(() => {
          this.$router.push({
            path: "/smart/workorder",
            query: {},
          });
          this.$message({
            type: "success",
            message: "操作成功!"
          });
        }).catch((error) => {
          console.log(error);
          this.$message({
            type: "error",
            message: "操作失败!"
          });
        });
      },
      seachToUpdate() {
        this.tab1_option.column[1].disabled = true;
        this.tab1_option.column[2].disabled = true;
        this.shouldShowButton = false;
        this.addupdateShowButton = true;
        this.readonlyForm = false;
        this.frame_class = null;
      },
      del() {
        this.$confirm("是否将选择数据审核?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          remove(this.tab1_form.id).then(() => {
            this.$router.push({
              path: "/smart/workorder",
              query: {},
            });
            this.$message({
              type: "success",
              message: "操作成功!"
            });
          }).catch((error) => {
            console.log(error);
            this.$message({
              type: "error",
              message: "操作失败!"
            });
          });
        })
      },
    }
  }
</script>
<style>
  .head-style {
    background-color: #1e9fff !important;
    color: #FFFFFF !important;
  }

  .frame_class1 .el-input__inner,
  .frame_class1 .el-textarea__inner {
    border: none;
    box-shadow: none;
    outline: none;
    pointer-events: none;
  }

  .frame_class1 .el-input__icon {
    display: none;
  }

  .frame_class1 .el-input--prefix .el-input__inner {
    padding-left: 15px;
  }

  .frame_class1 input::placeholder {
    color: transparent;
    display: none; /* 默认隐藏 */
  }

  .container {
    display: flex;
    justify-content: flex-end; /* 将子元素推到容器的末端 */
  }

  .frame_class1 div.el-select--small {
    border: none;
    box-shadow: none;
    outline: none;
    pointer-events: none;
  }

  .check_status_class {
    display: flex;
    justify-content: flex-end; /* 将子元素推到容器的末端 */
  }
</style>