thoth-frontend-test/src/views/ToConfigure/components/BusinessDirection.vue

<template>
  <div>
    <div class="spacing">
      <el-button size="small" type="primary" icon="el-icon-plus" @click="handlerModule('add')"> 新增一级方向 </el-button>
    </div>
    <el-table ref="moduleTable" :data="moduleData" style="width: 100%;margin-bottom: 20px;" row-key="id" border :tree-props="{children: 'childRqmtOrnts', hasChildren: 'hasChildren'}" header-align="center" size="mini" :header-cell-style="{ background: '#F2F3F6' }" fit>
      <el-table-column v-if="false" prop="id" label="ID" width="180" align="center" />
      <el-table-column prop="rqmtOrntName" label="需求方向名称" />
      <el-table-column prop="creator" label="创建人" width="150" align="center" />
      <el-table-column prop="gmtCreate" label="创建时间" width="150" align="center" />
      <el-table-column label="操作" width="240" align="center">
        <template slot-scope="scope">
          <el-button size="mini" plain @click="handlerModule('add', scope.row, scope.$index)">添加</el-button>
          <el-button size="mini" plain type="primary" @click="handlerModule('edit', scope.row, scope.$index)">编辑</el-button>
          <el-button size="mini" plain type="danger" @click="handlerModule('delete', scope.row, scope.$index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :title="moduleTitle" :visible.sync="moduleDialog" class="public_task" width="30%" :before-close="() => {moduleDialog = false}">
      <div class="blueStripe" />
      <el-form ref="moduleForm" :model="moduleForm">
        <template v-if="curcentModule === 'add'">
          <el-form-item label="父方向:" :label-width="formLabelWidth">
            <el-col :span="18">{{ curcentParent }}</el-col>
          </el-form-item>
          <el-form-item
            v-for="(moduleName, index) in moduleForm.rqmtOrntNames"
            :key="index"
            label="方向名称:"
            :label-width="formLabelWidth"
            :prop="'rqmtOrntNames.' + index"
            :rules="[
              { required: true, message: '请输入方向名称', trigger: 'blur' },
              { max: 20, message: '方向名称过长', trigger: 'blur' }
            ]"
          >
            <el-col :span="20">
              <el-input v-model="moduleForm.rqmtOrntNames[index]" style="width: 100%;" autocomplete="off" placeholder="不超过20个字符" />
            </el-col>
            <el-col v-show="index === moduleForm.rqmtOrntNames.length-1" :span="2" :offset="1">
              <i class="el-icon-circle-plus-outline" @click="addModuleForm()" />
            </el-col>
          </el-form-item>
        </template>
        <template v-if="curcentModule === 'edit'">
          <el-form-item label="父方向:" :label-width="formLabelWidth">
            <el-col :span="18">{{ curcentParent }}</el-col>
          </el-form-item>
          <el-form-item label="方向名称:" :label-width="formLabelWidth">
            <el-input v-model="moduleForm.rqmtOrntNames[0]" style="width: 100%;" autocomplete="off" placeholder="不超过20个字符" />
          </el-form-item>
        </template>
        <div v-if="curcentModule === 'delete'" align="center">
          是否要删除需求方向：<span style="color: #E6A23C">{{ moduleForm.rqmtOrntNames[0] }}</span>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="moduleDialog = false">取 消</el-button>
        <el-button type="primary" size="mini" @click="confirmModule('moduleForm')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { settingQueryBizRqmtOrntList, settingDeleteBizRqmtOrnt, settingAddBizRqmtOrnt, settingUpdateBizRqmtOrnt, queryBizModuleList } from '@/api/configure'
import '@/styles/PublicStyle/index.scss'
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      moduleData: [],
      moduleDialog: false,
      formLabelWidth: '120px',
      curcentModule: '', // 当前方向类型
      moduleForm: { bizId: null, rqmtOrntNames: [null], parentId: null, id: null }, // 添加方向form
      moduleTitle: '',
      codeName: '' // 编辑失败还原之前的名字
    }
  },
  computed: {
    ...mapGetters(['bizId'])
  },
  watch: {
    bizId: {
      handler(newV) {
        if (newV === -1) return
        this.settingQueryBizRqmtOrntList()
      },
      immediate: true
    }
  },
  created() {
    this.getQueryBizModuleList()
  },
  methods: {
    async getQueryBizModuleList() { // 获取结构化模块列表
      console.log(this.$store.state.data.bizId, '哈哈')
      const res = await queryBizModuleList(this.bizId)
      this.data = this.handleData(res.data)
    },
    handleData(arr) {
      if (arr.length === 0) return
      const newArr = arr.filter(item => {
        return item.isDelete !== 1
      })
      for (let i = 0; i < newArr.length; i++) {
        newArr[i].childModules = this.handleData(newArr[i].childModules)
      }
      return newArr
    },
    async settingQueryBizRqmtOrntList() {
      const res = await settingQueryBizRqmtOrntList(this.bizId)
      this.moduleData = res.data
    },
    handlerModule(type, data, index) { // 方向处理
      this.curcentModule = type
      this.moduleForm = { bizId: this.bizId, rqmtOrntNames: [null], parentId: -1, id: null }// 初始化
      this.curcentParent = '无'
      this.moduleTitle = '新增方向'
      if (data && type === 'add') {
        this.moduleDialog = true
        this.moduleTitle = '新增方向'
        this.curcentParent = data.rqmtOrntName
        this.moduleForm.parentId = data.id
      } else if (data && type === 'edit') {
        this.moduleDialog = true
        this.moduleTitle = '编辑方向'
        this.moduleForm.id = data.id
        this.curcentParent = data.parentId === -1 ? '无' : data.parentRqmtOrntName
        this.moduleForm.parentId = data.parentId
        this.moduleForm.rqmtOrntNames[0] = data.rqmtOrntName
        this.codeName = data.rqmtOrntName
      } else if (data && type === 'delete') {
        if (data.childRqmtOrnts && data.childRqmtOrnts.length > 0) {
          this.$message({ message: '该方向下存在子方向，不允许删除', type: 'error' })
        } else {
          this.moduleDialog = true
          this.moduleTitle = '删除确认'
          this.moduleForm.id = data.id
          this.moduleForm.rqmtOrntNames[0] = data.rqmtOrntName
        }
      } else {
        this.moduleDialog = true
      }
    },
    addModuleForm() {
      if (this.moduleForm.rqmtOrntNames.length <= 4) {
        this.moduleForm.rqmtOrntNames.push(null)
      }
    },
    async confirmModule(formName) { // 方向操作确认
      if (this.curcentModule === 'add') {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            settingAddBizRqmtOrnt(this.moduleForm).then(res => {
              if (res.code === 200) {
                this.moduleDialog = false
                this.settingQueryBizRqmtOrntList()
                this.$message({ message: '已新增需求方向', type: 'success' })
              }
            })
          } else {
            this.$message({ message: '填写格式不正确', type: 'error' })
            return false
          }
        })
      } else if (this.curcentModule === 'edit') {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let data = {}
            data = this.moduleForm
            data.rqmtOrntName = this.moduleForm.rqmtOrntNames.toString()
            settingUpdateBizRqmtOrnt(data).then(res => {
              if (res.code === 200) {
                this.moduleDialog = false
                this.settingQueryBizRqmtOrntList()
                this.$message({ message: '已修改需求方向', type: 'success' })
              } else {
                this.$set(this.moduleForm, 'rqmtOrntNames[0]', this.codeName)
              }
            })
          } else {
            this.$message({ message: '填写格式不正确', type: 'error' })
            return false
          }
        })
      } else if (this.curcentModule === 'delete') {
        const res = await settingDeleteBizRqmtOrnt(this.moduleForm)
        if (res.code === 200) {
          this.moduleDialog = false
          this.settingQueryBizRqmtOrntList()
          this.$message({ message: '删除成功', type: 'success' })
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.spacing {
  margin: 0 0 20px;
  text-align: right;
}
</style>