portal-vue/src/views/info/SpecAdd.vue

<template>
  <div>
    <el-dialog
      v-if="visible"
      v-loading="loading"
      :visible.sync="visible"
      :close-on-press-escape="true"
      :close-on-click-modal="false"
      :show-close="false"
      custom-class="main-edit-dialog"
      :title="title"
    >
      <el-form :ref="formName" :model="formData" :rules="rules" label-width="120px" class="dialog-form">
        <el-form-item prop="title" label="标题">
          <el-input v-model="formData.title" clearable placeholder="请输入" />
        </el-form-item>
        <el-form-item prop="scopeIds" label="发布范围">
          <el-select v-model="formData.scopeIds" multiple clearable placeholder="请选择" style="width:calc(100% - 110px)">
            <el-option
              v-for="item in deptOptions"
              :key="item.orgCode"
              :label="item.shortName"
              :value="item.orgCode"
            />
          </el-select>
          <el-button type="primary" style="margin-left: 10px;" @click="showTree">接收单位</el-button>
        </el-form-item>
        <el-form-item prop="attachmentPath" label="上传文件">
          <upload-file :file-type="formData.messageType" :on-success="uploadSuccess" :on-error="uploadError" />
          <span v-if="!isNull(formData.attachmentName)" style="margin-left: 10px;">
            <i class="upload-success el-icon-circle-check" />{{ formData.attachmentName }}
          </span>
        </el-form-item>
        <el-form-item prop="content" label="信息内容">
          <el-input v-model="formData.content" type="textarea" :rows="3" clearable placeholder="请输入" />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="save">确定</el-button>
      </div>
    </el-dialog>
    <dept-tree ref="deptTree" :tree-data="deptData" :checked-keys="formData.scopeIds" @updateValue="setDepts" />
  </div>
</template>
<script>
import { isNull } from '@/utils/convert'
import { pushSave } from '@/api/info'

import UploadFile from '@/components/Upload/UploadFile'
import DeptTree from './components/DeptTree'

export default {
  components: { UploadFile, DeptTree },
  props: {
    deptData: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      // dialog
      visible: false,
      isView: true,
      viewType: 'ADD',
      title: 'Edit',
      formName: 'editForm',
      formData: {
        id: null,
        messageType: 1,
        title: '',
        scopeIds: [],
        attachmentPath: '',
        attachmentName: '',
        content: '',
        t: 0
      },
      rules: {
        title: [
          { required: true, message: '请输入标题', trigger: 'change' }
        ],
        scopeIds: [
          { required: true, message: '请选择发布范围', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '请输入信息内容', trigger: 'blur' }
        ]
      },
      action: 'add',
      // select:
      deptOptions: [],
      selectTreeProps: {
        // 配置项（必选）
        nodeKey: 'shortName',
        label: 'shortName',
        value: 'shortName',
        children: 'children'
        // disabled:true
      },
      // others
      loading: false
    }
  },
  methods: {
    // 取值
    setDepts(data) {
      this.deptOptions = data
      this.formData.scopeIds = data.map(item => item.orgCode)
    },
    // Upload
    uploadSuccess(data) {
      // this.$set(this.formData, 'icon', data.url)
      this.formData.attachmentPath = data.url
      this.formData.attachmentName = data.fileName + '.' + data.extension
    },
    uploadError(error) {
      this.$message({
        type: 'error',
        duration: 0,
        showClose: true,
        message: '上传文件出错：' + error.message
      })
    },
    /**
     * 加载dialog
     */
    open(viewType, data) {
      this.title = '发布通知通告'
      this.isView = false
      this.action = 'add'
      this.viewType = viewType
      this.visible = true
    },
    close() {
      this.visible = false
    },
    save() {
      this.$refs[this.formName].validate((valid) => {
        if (valid) {
          this.loading = true
          this.formData.t = new Date().getTime()
          pushSave(this.formData).then(res => {
            this.$refs[this.formName].resetFields()
            this.formData.attachmentName = ''
            this.visible = false
            this.loading = false
            this.$emit('refreshData')
            this.$message({
              type: 'success',
              message: '保存成功!'
            })
          }).catch(error => {
            console.log(error)
            this.loading = false
            this.$message({
              type: 'error',
              duration: 0,
              showClose: true,
              message: '保存出错：' + error.message
            })
          })
        }
      })
    },
    showTree() {
      this.$refs['deptTree'].open()
    },
    isNull(obj) {
      return isNull(obj)
    }
  }
}
</script>

<style lang="scss" scoped>

</style>