imcs_yj_fe/imcs-ui/src/views/zuihou/repairManger/maintenanceLog/components/Edit.vue

<template>
  <el-dialog
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :title="title"
    :append-to-body="true"
    :visible.sync="isVisible"
    :width="width"
    top="50px"
  >
    <el-form
      ref="form"
      :model="maintenance"
      :rules="rules"
      label-position="right"
      label-width="130px"
    >
      <!--下次维保时间-->
      <el-form-item
        :label="$t(&quot;resource.table.repair.maintenanceTime&quot;)"
        prop="maintenanceTime"
      >
        <el-date-picker
          v-model="maintenance.maintenanceTime"
          type="datetime"
          value-format="yyyy-MM-dd"
          :placeholder="$t(&quot;common.pleaseSelect&quot;)"
          style="width: 50%;"
          :picker-options="pickerOptions"
        />
      </el-form-item>

      <el-form-item
        :label="$t(&quot;resource.table.repair.maintenanceContent&quot;)"
        prop="nextWork"
      >
        <el-input
          v-model="maintenance.remark"
          type="textarea"
          :rows="3"
          style="width: 93%;"
        />
        <el-tooltip
          class="item"
          :content="$t(&quot;project.rules.noMoreThan1024&quot;)"
          effect="dark"
          placement="top-end"
        >
          <i class="el-icon-question" />
        </el-tooltip>
      </el-form-item>

      <el-form-item
        :label="$t(&quot;resource.table.repair.maintenanceUser&quot;)"
        prop="maintenanceUserList"
      >
        <el-select
          v-model="maintenance.maintenanceUser"
          filterable
          clearable
          :placeholder="$t(&quot;common.pleaseEnter&quot;)"
          class="selectCurrt"
          style="width: 50%;"
          @change="maintenanceUserChange($event)"
        >
          <el-option
            v-for="(item, index) in maintenanceUserList"
            :key="index"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <!--状态-->
      <el-form-item
        :label="$t(&quot;resource.table.repair.maintenanceStatus&quot;)"
        prop="status"
      >
        <template>
          <el-radio
            v-model="maintenance.status"
            label="1"
          >
            正常
          </el-radio>
          <el-radio
            v-model="maintenance.status"
            label="0"
          >
            暂停使用
          </el-radio>
        </template>
      </el-form-item>
    </el-form>
    <div
      slot="footer"
      class="dialog-footer"
    >
      <el-button
        plain
        type="warning"
        @click="isVisible = false"
      >
        {{ $t('common.cancel') }}
      </el-button>
      <el-button
        plain
        type="primary"
        :disabled="confirmDisabled"
        @click="submitForm"
      >
        {{ $t('common.confirm') }}
      </el-button>
    </div>
  </el-dialog>
</template>
<script>
  // 【维保计划管理】-API
  // 【维保详情管理】-API
  import repairDetailApi from "@/api/resourceProductMgr/repairDetail"

  export default {
    name: 'MaintenanceEdit',
    props: {
      dialogVisible: {
        type: Boolean,
        default: false
      },
      title: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() <= Date.now() - 1 * 24 * 3600 * 1000
          }
        },
        type: 'add',
        maintenance: this.initMaintenance(),
        screenWidth: 0,
        width: this.initWidth(),
        confirmDisabled: false,
        rules: {
          maintenanceTime: [
            {required: true, message: this.$t("rules.require"), trigger: 'blur'}
          ]
        },
        maintenanceUserList: [],
      }
    },
    computed: {
      isVisible: {
        get() {
          return this.dialogVisible
        },
        set() {
          this.close()
          this.reset()
        }
      }
    },
    created() {

      // 查询【所有用户】信息
      repairDetailApi.getUserList(this.project).then(response => {
        const res = response.data;
        if (res.isSuccess) {
          this.maintenanceUserList = response.data.data
        }
      });
    },
    mounted() {
      window.onresize = () => {
        return (() => {
          this.width = this.initWidth()
        })()
      }
    },
    methods: {
      initMaintenance() {
        return {
          status: '1',
          maintenanceUserList: [],
          maintenanceUsers: "",
          maintenanceStartTime: '',
          maintenanceEndTime: '',
          remark: '',
        }
      },
      initWidth() {
        this.screenWidth = document.body.clientWidth
        if (this.screenWidth < 991) {
          return '90%'
        } else if (this.screenWidth < 1400) {
          return '45%'
        } else {
          return '800px'
        }
      },
      setMaintenanceInfo(data,opeType) {
          console.log(data)
        this.type = opeType
        if(opeType==='add'){
          this.maintenance.repairId = data
        }else if(opeType==='edit'){
          this.maintenance =  {...data}
        }
      },
      close() {
        this.$emit('close')
      },
      reset() {
        // 先清除校验，再清除表单，不然有奇怪的bug
        this.$refs.form.clearValidate()
        this.$refs.form.resetFields()
        this.maintenance = this.initMaintenance()
      },
      submitForm() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.confirmDisabled = true
            if (this.type === 'add') {
              this.save()
            } else {
              this.update()
            }
          } else {
            return false
          }
        })
      },
      save() {
        console.log(this.maintenance)
        repairDetailApi.save(this.maintenance)
          .then((response) => {
            const res = response.data
            if (res.isSuccess) {
              this.isVisible = false
              this.$message({
                message: this.$t('tips.createSuccess'),
                type: 'success'
              })
              // 通知列表
              this.$emit("success");
              // 通知列表-并关闭弹出框
              this.$emit("close");
            }
          }).finally(() => {
          this.confirmDisabled = false
          return true
        })
      },
      update() {
        repairDetailApi.update(this.maintenance)
          .then((response) => {
            const res = response.data
            if (res.isSuccess) {
              this.isVisible = false
              this.$message({
                message: this.$t('tips.updateSuccess'),
                type: 'success'
              })
              // 通知列表
              this.$emit("success");
              // 通知列表-并关闭弹出框
              this.$emit("close");
            }
          }).finally(() => {
          this.confirmDisabled = false
          return true
        })
      },
      maintenanceUserChange (val) {
        this.maintenance.maintenanceName = "" //初始化数据
        this.maintenanceUserList.find((item)=>{ //这里的options就是数据源
          if(item.id == val){
            this.maintenance.maintenanceName = this.maintenance.maintenanceName + "," +  item.name//这里的label我改成了roleName
          }
        });

        if(this.maintenance.maintenanceName.length > 0){
          this.maintenance.maintenanceName = this.maintenance.maintenanceName.substr(1);
        }
      },

    }
  }
</script>
<style lang="scss">
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }

  .avatar {
    width: 100px;
    height: 100px;
    display: block;
  }

  .checkUsed {
    display: inline-block;
    margin-left: 10px;
    color: #1890ff;
  }
</style>