portal-vue/src/views/info/components/NoticeAdd.vue

<template>
  <div>
    <el-dialog
      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="Title">
          <el-input v-model="formData.systemName" placeholder="Please Input" clearable />
        </el-form-item>
        <el-form-item prop="scopeIds" label="Range">
          <el-input v-model="formData.scopeIds" clearable />
        </el-form-item>
        <el-form-item prop="attachmentPath" label="File">
          <upload-file :file-type="formData.messageType" :on-success="uploadSuccess" :on-error="uploadError" />
          <span style="display:none">{{ formData.attachmentPath }} </span>
          <div v-if="!isNull(formData.attachmentName)">
            <i class="upload-success el-icon-circle-check" />{{ formData.attachmentName }}
          </div>
        </el-form-item>
        <el-form-item prop="content" label="Content">
          <el-input v-model="formData.content" type="textarea" :rows="3" />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="close">Cancel</el-button>
        <el-button type="primary" @click="save">Confirm</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { isNull, formatDictData } from '@/utils/convert'

import { pushSaveSystem } from '@/api/system'
import { getDeptRootData, getDeptChildren, getDeptTreeData } from '@/api/dept'

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

export default {
  components: { UploadFile },
  props: {
    typeData: {
      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: ''
      },
      rules: {
        title: [
          { required: true, message: '请输入标题', trigger: 'change' }
        ],
        scopeIds: [
          { required: true, message: '请选择发布范围', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '请输入信息内容', trigger: 'blur' }
        ]
      },
      action: 'add',
      // select:
      selectTreeProps: {
        // 配置项（必选）
        nodeKey: 'shortName',
        label: 'shortName',
        value: 'shortName',
        children: 'children'
        // disabled:true
      },
      defaultTreeId: '',
      deptData: [],
      policeCategoryData: [],
      activeFlagData: [{ id: 1, label: '在用' }, { id: 0, label: '停用' }],
      // others
      loading: false
    }
  },
  created() {
    console.log('created')
  },
  mounted() {
    console.log('mounted')
  },
  methods: {
    // 取值
    getSelectValue(value) {
      this.formData.deptName = value
    },
    // Upload
    uploadSuccess(data) {
      this.$set(this.formData, 'icon', data.url)
      this.fileName = data.fileName + '.' + data.extension
    },
    uploadError(error) {
      this.$message.error({
        type: 'error',
        duration: 0,
        showClose: true,
        message: error.message
      })
    },
    /**
     * 加载dialog
     */
    open(viewType, data) {
      this.title = 'Publish Notice'
      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
          pushSaveSystem(this.action, this.formData).then(res => {
            this.$refs[this.formName].resetFields()
            this.visible = false
            this.loading = false
            this.$emit('refreshData')
            this.$message({
              type: 'success',
              message: '保存成功!'
            })
          }).catch(error => {
            console.log(error)
            this.loading = false
            this.$message.error({
              type: 'error',
              duration: 0,
              showClose: true,
              message: '保存失败：' + error.message
            })
          })
        }
      })
    },
    getDeptData() {
      getDeptTreeData().then(res => {
        if (!isNull(res.data)) {
          this.deptData = res.data
        } else {
          this.deptData = []
        }
      }).catch(error => {
        console.log(error)
        this.$message.error({
          type: 'error',
          duration: 0,
          showClose: true,
          message: '获取机构出错: ' + error.message
        })
      })
    },
    loadNode(node, resolve) {
      if (node.level === 0) {
        getDeptRootData().then(res => {
          if (!isNull(res.data)) {
            resolve(res.data)
            this.defaultTreeId = res.data[0].orgCode
          } else {
            resolve([])
          }
        }).catch(error => {
          console.log(error)
          this.$message.error({
            type: 'error',
            duration: 0,
            showClose: true,
            message: '获取机构出错: ' + error.message
          })
        })
      } else {
        getDeptChildren(node.data.orgCode).then(res => {
          if (!isNull(res.data)) {
            resolve(res.data)
          } else {
            resolve([])
          }
        }).catch(error => {
          console.log(error)
          this.$message.error({
            type: 'error',
            duration: 0,
            showClose: true,
            message: '获取机构出错: ' + error.message
          })
        })
      }
    },
    formatDictData(dictType, type) {
      if (dictType === 'system_type') {
        return formatDictData(this.typeData, type)
      }
      if (dictType === 'active_type') {
        return formatDictData(this.activeFlagData, type)
      }
      return ''
    },
    isNull(obj) {
      return isNull(obj)
    }
  }
}
</script>

<style lang="scss" scoped>
.main-edit-dialog {

  .dialog-form {
    ::v-deep {
      .el-input__inner {
        width: 250px !important;
      }
    }
  }

  .upload-success {
    color: #13ce66;
    margin-right: 5px;
  }
}
</style>