kd-aiot-frontend-pro/src/views/changeManagement/components/noticeInfo.vue

<template>
  <el-form
    ref="form"
    :model="form"
    :rules="rules"
    label-width="100px"
    class="create-form"
  >
    <el-row :gutter="15">
      <el-col v-bind="styleResponsive ? { lg: 24, md: 24 } : { span: 24 }">
        <el-form-item label="名称:" prop="name">
          <el-input v-model="form.name" :disabled="disabled" />
        </el-form-item>
      </el-col>
      <el-col v-bind="styleResponsive ? { lg: 24, md: 24 } : { span: 24 }">
        <el-form-item label="编码:" prop="code">
          <el-input v-model="form.code" disabled />
        </el-form-item>
      </el-col>
      <el-col v-bind="styleResponsive ? { lg: 24, md: 24 } : { span: 24 }">
        <el-form-item label="类型:" prop="type">
          <DictSelection
            dictName="变更类型"
            v-model="form.type"
            :disabled="disabled" 
          ></DictSelection>
        </el-form-item>
      </el-col>
      <el-col v-bind="styleResponsive ? { lg: 24, md: 24 } : { span: 24 }">
        <el-form-item label="类别:" prop="category">
          <DictSelection
            multiple
            dictName="问题类型"
            v-model="form.category"
            :disabled="disabled" 
          ></DictSelection>
        </el-form-item>
      </el-col>
      <el-col v-bind="styleResponsive ? { lg: 24, md: 24 } : { span: 24 }">
        <el-form-item label="变更原因:">
          <el-input
            v-model="form.changeReason"
            type="textarea"
            :rows="2"
            :disabled="disabled" 
          />
        </el-form-item>
      </el-col>
      <el-col v-bind="styleResponsive ? { lg: 24, md: 24 } : { span: 24 }">
        <el-form-item label="变更内容:">
          <el-input
            v-model="form.changeContent"
            type="textarea"
            :rows="2"
            :disabled="disabled" 
          />
        </el-form-item>
      </el-col>
      <el-col v-bind="styleResponsive ? { lg: 24, md: 24 } : { span: 24 }">
        <el-form-item label="描述:">
          <el-input
            v-model="form.problemDescription"
            type="textarea"
            :rows="2"
            :disabled="disabled" 
          />
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item
          label="通知人员"
          prop="recipientId"
          style="margin-bottom: 20px"
        >
          <el-select
            v-model="form.recipientId"
            clearable
            style="width: 100%"
            :disabled="disabled" 
            :filterable="true"
          >
            <el-option
              v-for="item in userOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
              @click.native="userChange(item)"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item prop="accessory" label="相关文档">
          <fileUpload
            v-model="form.accessory"
            module="main"
            :limit="5"
            :disabled="disabled" 
            :showLib="false"
          />
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import fileUpload from '@/components/upload/fileUpload';
import { listAllUserBind } from '@/api/system/user/index';
import { infoForm } from './data.js';

export default {
  components: { fileUpload },
  data() {
    return {
      userOptions: [],
      form: { ...infoForm() },
      // 表单验证规则
      rules: {
        type: [{ required: true, message: '请选择', trigger: 'change' }],
        name: [{ required: true, message: '请选择', trigger: 'change' }],
        relationType: [{ required: true, message: '请选择', trigger: 'change' }]
      }
    };
  },
  props: {
    disabled: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    // 是否开启响应式布局
    styleResponsive() {
      return this.$store.state.theme.styleResponsive;
    }
  },
  created() {
    this.userOptions = [];
    listAllUserBind().then((data) => {
      this.userOptions.push(...data);
    });
  },
  methods: {
    cancel() {
      this.form = { ...infoForm() };
    },
    setValue(data) {
      this.form = JSON.parse(JSON.stringify(data));
    },
    open(row) {
      if (row) {
        this.form = row;
      }
    },
    userChange(item) {
      this.form.recipientName = item.name;
    },
    /* 保存编辑 */
    async getValue() {
      const valid = await this.validateFn();
      this.form.objType = '3';
      return valid ? JSON.parse(JSON.stringify(this.form)) : '';
    },
    validateFn() {
      return new Promise((resolve, reject) => {
        this.$refs.form.validate((valid) => {
          resolve(valid);
        });
      });
    }
  }
};
</script>
<style lang="scss" scoped>
</style>