portal-vue/src/views/business/components/DetailEdit.vue

<template>
  <div>
    <el-dialog
      v-loading="loading"
      :visible.sync="visible"
      :close-on-press-escape="true"
      :close-on-click-modal="false"
      :show-close="false"
      destroy-on-close
      custom-class="main-edit-dialog"
      :title="title"
    >
      <el-form :ref="formName" :model="formData" :rules="isView ? {} : rules" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item prop="appType" label="Type">
              <el-select v-if="!isView" v-model="formData.appType" placeholder="Please select">
                <el-option v-for="item in typeData" :key="item.id" :label="item.label" :value="item.id" />
              </el-select>
              <span v-else>{{ formData.appType }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="systemName" label="Name">
              <el-input v-if="!isView" v-model="formData.systemName" />
              <div v-else>{{ formData.systemName }}</div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="systemNumber" label="Code">
              <el-input v-if="!isView" v-model="formData.systemNumber" />
              <span v-else>{{ formData.systemNumber }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="shortName" label="Alias">
              <el-input v-if="!isView" v-model="formData.shortName" />
              <span v-else>{{ formData.shortName }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="deptName" label="Dept">
              <el-select v-if="!isView" v-model="formData.deptName" placeholder="placeholder">
                <el-option v-for="item in orgData" :key="item.id" :label="item.label" :value="item.id" />
              </el-select>
              <span v-else>{{ formData.deptName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="url" label="Url">
              <el-input v-if="!isView" v-model="formData.url" />
              <span v-else>{{ formData.url }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="activeFlag" label="Active">
              <el-select v-if="!isView" v-model="formData.activeFlag" placeholder="placeholder">
                <el-option v-for="item in activeFlagData" :key="item.id" :label="item.label" :value="item.id" />
              </el-select>
              <span v-else>{{ formData.activeFlag }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="policeCategory" label="Category">
              <el-select v-if="!isView" v-model="formData.policeCategory" placeholder="placeholder">
                <el-option v-for="item in policeCategoryData" :key="item.id" :label="item.label" :value="item.id" />
              </el-select>
              <span v-else>{{ formData.policeCategory }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="icon" label="Icon" style="height: 100px;">
              <upload-file v-if="!isView" :file-type="fileType" :on-success="uploadSuccess" :on-error="uploadError" />
              <el-input v-model="formData.icon" type="hidden" style="display:none" />
              <div v-if="!isNull(formData.icon)">
                <i class="upload-success el-icon-circle-check" />{{ fileName }}
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer">
        <el-button @click="close">Cancel</el-button>
        <el-button v-if="!isView" type="primary" @click="saveSystem">Confirm</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { isNull, isObject } from '@/utils/convert'

import { pushSaveBusiness } from '@/api/business'

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

export default {
  components: { UploadFile },
  props: {
    typeData: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      // dialog
      visible: false,
      isView: true,
      fileType: '97', // 99: Sytem 97: Business
      type: '',
      title: 'Edit',
      formName: 'editForm',
      formData: {
        id: null,
        appType: null,
        systemName: '',
        systemNumber: '',
        shortName: null,
        deptName: '',
        url: '',
        activeFlag: '',
        policeCategory: '',
        icon: null
      },
      rules: {
        appType: [
          { required: true, message: '请选择应用类型', trigger: 'change' }
        ],
        systemName: [
          { required: true, message: '请输入应用名称', trigger: 'blur' }
        ],
        systemNumber: [
          { required: true, message: '请输入应用编号', trigger: 'blur' }
        ],
        shortName: [
          { required: true, message: '请输入应用简称', trigger: 'blur' }
        ],
        deptName: [
          { required: true, message: '请输入应用事权单位名称', trigger: 'blur' }
        ],
        url: [
          { type: 'url', required: true, message: '请输入应用访问地址', trigger: 'blur' }
        ],
        activeFlag: [
          { required: true, message: '请选择应用在用标识', trigger: 'change' }
        ],
        icon: [
          { required: true, message: '请上传应用图标', trigger: 'change' }
        ]
      },
      fileName: '',
      action: 'add',
      // select:
      orgData: [{ id: 1, label: 'Test1' }, { id: 0, label: 'Test0' }],
      policeCategoryData: [],
      activeFlagData: [{ id: 1, label: 'Active' }, { id: 0, label: 'Deactive' }],
      // others
      loading: false
    }
  },
  computed: {
    myListIds() {
      return this.myListData.map(item => item.id)
    }
  },
  methods: {
    // 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(type, data) {
      if (type === 'ADD') {
        this.title = 'Add'
        this.isView = false
        this.action = 'add'
        if (this.type !== 'ADD') {
          data = {}
        }
      } else if (type === 'EDIT') {
        this.title = 'Edit'
        this.isView = false
        this.action = 'update'
      } else {
        this.title = 'View'
        this.isView = true
      }
      this.type = type
      if (isObject(data)) {
        Object.keys(this.formData).forEach(key => {
          this.formData[key] = data[key]
        })
      }
      this.visible = true
    },
    close() {
      this.visible = false
    },
    saveSystem() {
      this.$refs[this.formName].validate((valid) => {
        if (valid) {
          this.loading = true
          pushSaveBusiness(this.action, this.formData).then(res => {
            this.$refs[this.formName].resetFields()
            this.visible = false
            this.loading = false
            this.$message({
              type: 'success',
              message: 'Save Successfully!'
            })
          }).catch(error => {
            console.log(error)
            this.loading = false
            this.$message.error({
              type: 'error',
              duration: 0,
              showClose: true,
              message: error.message
            })
          })
        }
      })
    },
    isNull(obj) {
      return isNull(obj)
    }
  }
}
</script>

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

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