11-mes-new/src/views/system-manage/organizationManege.vue

<!--
 * @Author: zwq
 * @Date: 2021-04-07 16:56:24
 * @LastEditors: gtz
 * @LastEditTime: 2022-07-28 21:14:32
 * @Description:
-->
<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <div style="float: right; padding: 3px 0">
        <el-button type="primary" @click="showAdd">{{ 'btn.add' | i18nFilter }}</el-button>
        <el-button type="success" :disabled="!formData.name" @click="isAdd=false;isEdit=true">{{ 'btn.edit' | i18nFilter }}</el-button>
        <el-button type="danger" @click="deleteOrg">{{ 'btn.delete' | i18nFilter }}</el-button>
      </div>
    </div>
    <el-form ref="formData" :model="formData" :rules="rules" size="medium" label-width="100px">
      <el-form-item :label="$t('orgManage.orgName')" prop="name">
        <el-input v-model="formData.name" :readonly="!isEdit && !isAdd" :placeholder="['placeholder.input', $t('orgManage.orgName')] | i18nFilterForm" clearable :style="{width: '100%'}" />
      </el-form-item>
      <el-form-item :label="$t('orgManage.parentOrg')" prop="parentId">
        <el-select v-model="formData.parentId" :disabled="!isEdit && !isAdd" :placeholder="['placeholder.select', $t('orgManage.parentOrg')] | i18nFilterForm" clearable :style="{width: '100%'}">
          <el-option
            v-for="(item, index) in parentIdOptions"
            :key="index"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('orgManage.address')" prop="address">
        <el-input v-model="formData.address" :readonly="!isEdit && !isAdd" :placeholder="['placeholder.input', $t('orgManage.address')] | i18nFilterForm" clearable :style="{width: '100%'}" />
      </el-form-item>
      <el-form-item :label="$t('orgManage.phone')" prop="phone">
        <el-input v-model="formData.phone" :readonly="!isEdit && !isAdd" :placeholder="['placeholder.input', $t('orgManage.phone')] | i18nFilterForm" clearable :style="{width: '100%'}" />
      </el-form-item>
      <el-form-item :label="$t('orgManage.contact')" prop="contact">
        <el-input v-model="formData.contact" :readonly="!isEdit && !isAdd" :placeholder="['placeholder.input', $t('orgManage.contact')] | i18nFilterForm" clearable :style="{width: '100%'}" />
      </el-form-item>
      <el-form-item :label="$t('orgManage.email')" prop="email">
        <el-input v-model="formData.email" :readonly="!isEdit && !isAdd" :placeholder="['placeholder.input', $t('orgManage.email')] | i18nFilterForm" clearable :style="{width: '100%'}" />
      </el-form-item>
      <el-form-item :label="$t('orgManage.remark')" prop="remark">
        <el-input v-model="formData.remark" :readonly="!isEdit && !isAdd" :placeholder="['placeholder.input', $t('orgManage.remark')] | i18nFilterForm" clearable :style="{width: '100%'}" />
      </el-form-item>
    </el-form>
    <div v-show="isEdit||isAdd" style="text-align:center">
      <el-button type="primary" @click="resetForm">{{ 'btn.reset' | i18nFilter }}</el-button>
      <el-button type="success" @click="submitForm">{{ 'btn.submit' | i18nFilter }}</el-button>
    </div>
  </el-card>
</template>

<script>
import { getOrgDetail, addOrg, editOrg, delOrg } from '@/api/org'
import { getOrgList } from '@/api/org'

export default {
  data() {
    return {
      isEdit: false,
      isAdd: false,
      formData: {
        id: '',
        name: undefined,
        parentId: undefined,
        address: undefined,
        phone: undefined,
        contact: undefined,
        email: undefined,
        remark: undefined
      },
      parentId: '',
      rules: {
        name: [{
          required: true,
          message: this.$i18nForm(['placeholder.input', this.$t('orgManage.orgName')]),
          trigger: 'blur'
        }],
        parentId: [],
        address: [],
        phone: [],
        contact: [],
        email: [],
        remark: []
      },
      parentIdOptions: [],
      listQuery: {
        current: 1,
        size: 500
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    async getList() {
      // edit here
      const res = await getOrgList(this.listQuery)
      if (res.code === 0) {
        this.parentIdOptions = res.data.records
      }
    },
    init(id) {
      this.isEdit = false
      this.isAdd = false
      this.$nextTick(() => {
        this.$refs['formData'].resetFields()
        if (id) {
          getOrgDetail(id).then(res => {
            this.formData.id = res.data.id
            this.formData.name = res.data.name
            this.formData.parentId = res.data.parentId
            this.formData.address = res.data.address
            this.formData.phone = res.data.phone
            this.formData.contact = res.data.contact
            this.formData.email = res.data.email
            this.formData.remark = res.data.remark
            this.parentId = res.data.id
          })
          this.formData.id = id
        }
      })
    },
    resetForm() {
      this.$refs['formData'].resetFields()
    },
    showAdd() {
      this.isAdd = true
      this.isEdit = false
      this.$refs['formData'].resetFields()
      this.formData.parentId = this.parentId
    },
    submitForm() {
      if (this.isAdd) {
        this.addOrg()
      } else if (this.isEdit) {
        this.editOrg()
      }
    },
    addOrg() {
      this.$refs['formData'].validate((valid) => {
        if (valid) {
          const data = this.formData
          data.id = ''
          addOrg(data).then(res => {
            this.$message({
              message: this.$t('module.basicData.visual.success'),
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.getList()
                this.isEdit = false
                this.isAdd = false
                this.$emit('refreshDataList')
              }
            })
          })
        }
      })
    },
    editOrg() {
      this.$refs['formData'].validate((valid) => {
        if (valid) {
          const data = this.formData
          editOrg(data).then(res => {
            this.$message({
              message: this.$t('module.basicData.visual.success'),
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.getList()
                this.isEdit = false
                this.isAdd = false
                this.$emit('refreshDataList')
              }
            })
          })
        }
      })
    },
    deleteOrg() {
      delOrg(this.formData.id).then(response => {
        this.$message({
          message: this.$t('module.basicData.visual.success'),
          type: 'success',
          duration: 1500,
          onClose: () => {
            this.getList()
            this.$refs['formData'].resetFields()
            this.$emit('refreshDataList')
          }
        })
      })
    }
  }
}
</script>
<style scoped>
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 100%;
  }
</style>