@zengqiao@部门相关

dmp-edge-ai/public/index.html

@@ -25,7 +25,7 @@
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="appLoading">
      <img src="./iot-loading.gif" alt="loading" />
      <img src="<%= BASE_URL %>iot-loading.gif" alt="loading" />
    </div>
    <div id="app"></div>
    <!-- built files will be auto injected -->

dmp-edge-ai/src/service/OrganizeService.js

@@ -29,7 +29,7 @@ export function getOrganizeInfo(organizeId) {
 */
export function add(data) {
  return request({
    url: '/organize/add',
    url: '/organize/addOrganize',
    method: 'post',
    data
  })

dmp-edge-ai/src/utils/constant.js

@@ -42,8 +42,8 @@ export const IframeFlag = createEnum({
 * @type {{getDescFromValue, options, getDesc}}
 */
export const OrganizeType = createEnum({
  COMPANY: [0, '公司'],
  DEPARTMENT: [1, '部门']
  COMPANY: ['0', '公司'],
  DEPARTMENT: ['1', '部门']
})
/**

dmp-edge-ai/src/views/system/organize/components/BaseDialog.vue

@@ -0,0 +1,170 @@
<template>
  <el-dialog :title="title" class="common-modal" :visible.sync="dialogVisible" width="68.75%" @open="initData">
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <el-row>
        <el-col :span="10" :offset="2">
          <el-form-item label="部门名称" prop="organizeName">
            <el-input v-model.trim="form.organizeName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="部门编码" prop="organizeCode">
            <el-input v-model.trim="form.organizeCode"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="10" :offset="2">
          <el-form-item label="上级部门" prop="parentOrganizeId">
            <select-tree
              clearable
              style="width: 100%"
              v-model="form.parentOrganizeId"
              :tree-data="organizeList"
              :config="selectTreeConfig"
              :disabled="modalType === ModalType.EDIT"
            ></select-tree>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="组织类型" prop="organizeType">
            <el-select v-model="form.organizeType" style="width: 100%" clearable>
              <el-option v-for="item in OrganizeType.options" :key="item[0]" :label="item[1]" :value="item[0]">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="20" :offset="2">
          <el-form-item label="部门描述" prop="remark">
            <el-input type="textarea" v-model.trim="form.remark" :rows="2"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button v-if="!submitLoading" type="primary" @click="submit(modalType)">提交</el-button>
      <el-button v-else type="primary" :loading="submitLoading">提交中</el-button>
      <el-button @click="dialogVisible = false">关闭并返回</el-button>
    </span>
  </el-dialog>
</template>
<script>
import * as OrganizeService from '@/service/OrganizeService'
import SelectTree from '@/components/SelectTree'
import { ModalType, OrganizeType } from '@/utils/constant'
export default {
  name: 'BaseDialog',
  props: {
    organizeId: {
      type: [Number, String]
    },
    show: {
      type: Boolean,
      required: true,
      default: false
    },
    organizeList: {
      type: Array,
      required: true,
      default: () => []
    }
  },
  components: {
    SelectTree
  },
  data() {
    this.OrganizeType = OrganizeType
    this.ModalType = ModalType
    // 组织树形下拉组件映射配置
    this.selectTreeConfig = {
      id: 'organizeId',
      label: 'organizeName',
      children: 'children'
    }
    return {
      form: {
        organizeName: '',
        organizeCode: '',
        parentOrganizeId: '',
        organizeType: '',
        remark: ''
      },
      rules: {
        organizeName: [{ required: true, message: '请输入部门名称', trigger: 'blur' }],
        organizeCode: [{ required: true, message: '请输入部门编码', trigger: 'blur' }],
        parentOrganizeId: [{ required: true, message: '请选择上级部门', trigger: 'change' }],
        organizeType: [{ required: true, message: '请选择组织类型', trigger: 'change' }]
      },
      modalType: ModalType.ADD,
      submitLoading: false
    }
  },
  computed: {
    dialogVisible: {
      set(val) {
        this.$emit('update:show', val)
      },
      get() {
        return this.show
      }
    },
    title() {
      return this.modalType === ModalType.ADD ? '新增角色' : '编辑角色'
    }
  },
  methods: {
    /**
     * 初始化模态框
     */
    initData() {
      this.$refs.form && this.$refs.form.resetFields()
      this.form = {
        organizeName: '',
        organizeCode: '',
        parentOrganizeId: '',
        organizeType: '',
        remark: ''
      }
      if (this.organizeId) {
        // 编辑
        this.modalType = ModalType.EDIT
        OrganizeService.getOrganizeInfo(this.organizeId).then((res) => {
          this.form = { ...res }
          Reflect.deleteProperty(this.form, 'createDate')
          Reflect.deleteProperty(this.form, 'doneDate')
        })
      } else {
        // 新增
        this.modalType = ModalType.ADD
      }
    },
    submit(type) {
      this.$refs['form'].validate(async (valid) => {
        if (!valid) {
          return
        }
        const params = { ...this.form }
        this.submitLoading = true
        try {
          if (type === ModalType.ADD) {
            // 新增
            await OrganizeService.add(params)
          } else {
            // 编辑
            await OrganizeService.edit(params)
          }
          this.dialogVisible = false
          this.$emit('refresh')
        } finally {
          this.submitLoading = false
        }
      })
    }
  }
}
</script>
<style scoped lang="scss"></style>

dmp-edge-ai/src/views/system/organize/index.vue

@@ -32,6 +32,9 @@
        </el-table-column>
      </el-table>
    </div>
    <!--新建/编辑部门模态框-->
    <base-dialog :show.sync="baseVisible" :organizeId="organizeId" :organizeList="tableData" @refresh="search">
    </base-dialog>
  </div>
</template>
@@ -42,7 +45,8 @@ import * as OrganizeService from '@/service/OrganizeService'
export default {
  name: 'Organize',
  components: {
    PageHeader
    PageHeader,
    BaseDialog: () => import('./components/BaseDialog')
  },
  data() {
    this.OrganizeType = OrganizeType
@@ -55,18 +59,43 @@ export default {
      searchContent: {
        keywords: ''
      },
      tableData: []
      tableData: [],
      organizeId: '',
      baseVisible: false
    }
  },
  methods: {
    addOrganize() {
      console.log(111)
      this.organizeId = ''
      this.baseVisible = true
    },
    edit(row) {
      console.log(row)
      this.organizeId = row.organizeId
      this.baseVisible = true
    },
    deleteItem(row) {
      console.log(row)
      this.$confirm(`您确定删除该部门吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            instance.confirmButtonLoading = true
            instance.confirmButtonText = '删除中...'
            OrganizeService.deleteOrganize(row.organizeId)
              .then(() => {
                this.search()
                done()
              })
              .finally(() => {
                instance.confirmButtonText = '确定'
                instance.confirmButtonLoading = false
              })
          } else {
            done()
          }
        }
      })
    },
    search() {
      this.getOrganizeList()