岗位管理功能分离

yijiusmile

2021-02-02 69dfe08ea0b5e5e4f1f612fa6220d72892ec9132

 src/views/febs/system/dept/Index.vue

@@ -36,283 +36,217 @@
        </div>

      </el-col>

      <el-col :xs="24" :sm="12">

        <el-tabs v-model="activeName">

          <el-tab-pane label="部门信息" name="first">

            <el-card class="box-card">

              <div slot="header" class="clearfix">

                <span>{{ dept.deptId === '' ? this.$t('common.add') : this.$t('common.edit') }}</span>

              </div>

              <div>

                <el-form ref="form" :model="dept" :rules="rules" label-position="right" label-width="100px">

                  <el-form-item :label="$t('table.dept.parentId')" prop="parentId">

                    <treeselect
                      v-model="dept.parentId"
                      :multiple="false"
                      :options="deptTree"
                      :clear-value-text="$t('common.clear')"

                      placeholder=" "
                      style="width:100%"
                    />

                  </el-form-item>

                  <el-form-item :label="$t('table.dept.deptName')" prop="deptName">

                    <el-input v-model="dept.deptName" />

                  </el-form-item>

                  <el-form-item :label="$t('table.dept.orderNum')" prop="orderNum">

                    <el-input-number v-model="dept.orderNum" :min="0" :max="100" @change="handleNumChange" />

                  </el-form-item>

                  <el-form-item label="部门性质">

                    <el-select v-model="bmxz" placeholder="请选择">

                      <el-option label="分公司" value="1" />

                      <el-option label="部门" value="2" />

                      <el-option label="驻点" value="3" />

                    </el-select>

                  </el-form-item>

                  <el-form-item label="部门负责人">

                    <el-input />

                  </el-form-item>

                  <el-form-item label="联系电话">

                    <el-input />

                  </el-form-item>

                  <el-form-item label="部门智能">

                    <el-select v-model="bmzn" placeholder="请选择">

                      <el-option label="保安" value="1" />

                      <el-option label="后勤" value="2" />

                      <el-option label="管理" value="3" />

                    </el-select>

                  </el-form-item>

                  <el-form-item label="部门职责">

                    <el-input type="textarea" :rows="4" />

                  </el-form-item>

                </el-form>

              </div>

            </el-card>

            <el-card class="box-card" style="margin-top: -2rem;">

              <el-row>

                <el-col :span="24" style="text-align: right">

                  <el-button type="primary" plain :loading="buttonLoading" @click="submit">{{ dept.deptId === '' ? this.$t('common.add') : this.$t('common.edit') }}</el-button>

                </el-col>

              </el-row>

            </el-card>

          </el-tab-pane>

          <el-tab-pane label="岗位信息" name="second">

            <el-button type="danger" @click="showXzgw">添加岗位</el-button>

            <el-button type="primary">删除岗位</el-button>

            <el-table :data="jobData" style="width: 100%">

              <el-table-column prop="prop0" label="" width="180" />

              <el-table-column prop="prop1" label="序号" width="180" />

              <el-table-column prop="prop2" label="岗位名称" width="180" />

              <el-table-column prop="prop3" label="在岗人数" width="180" />

            </el-table>

          </el-tab-pane>

        </el-tabs>

        <el-card class="box-card">

          <div slot="header" class="clearfix">

            <span>{{ dept.deptId === '' ? this.$t('common.add') : this.$t('common.edit') }}</span>

          </div>

          <div>

            <el-form ref="form" :model="dept" :rules="rules" label-position="right" label-width="100px">

              <el-form-item :label="$t('table.dept.parentId')" prop="parentId">

                <treeselect
                  v-model="dept.parentId"
                  :multiple="false"
                  :options="deptTree"
                  :clear-value-text="$t('common.clear')"

                  placeholder=" "
                  style="width:100%"
                />

              </el-form-item>

              <el-form-item :label="$t('table.dept.deptName')" prop="deptName">

                <el-input v-model="dept.deptName" />

              </el-form-item>

              <el-form-item :label="$t('table.dept.orderNum')" prop="orderNum">

                <el-input-number v-model="dept.orderNum" :min="0" :max="100" @change="handleNumChange" />

              </el-form-item>

              <el-form-item label="部门性质">

                <el-select v-model="bmxz" placeholder="请选择">

                  <el-option label="分公司" value="1" />

                  <el-option label="部门" value="2" />

                  <el-option label="驻点" value="3" />

                </el-select>

              </el-form-item>

              <el-form-item label="部门负责人">

                <el-input />

              </el-form-item>

              <el-form-item label="联系电话">

                <el-input />

              </el-form-item>

              <el-form-item label="部门智能">

                <el-select v-model="bmzn" placeholder="请选择">

                  <el-option label="保安" value="1" />

                  <el-option label="后勤" value="2" />

                  <el-option label="管理" value="3" />

                </el-select>

              </el-form-item>

              <el-form-item label="部门职责">

                <el-input type="textarea" :rows="4" />

              </el-form-item>

            </el-form>

          </div>

        </el-card>

        <el-card class="box-card" style="margin-top: -2rem;">

          <el-row>

            <el-col :span="24" style="text-align: right">

              <el-button type="primary" plain :loading="buttonLoading" @click="submit">{{ dept.deptId === '' ? this.$t('common.add') : this.$t('common.edit') }}</el-button>

            </el-col>

          </el-row>

        </el-card>



      </el-col>

    </el-row>
    <el-dialog title="新增岗位" :visible.sync="dialogShowXzgw" width="50%">
      <el-form :model="baseicInformationForm" label-position="right" label-width="120px">
        <el-row>
          <el-col span="24">
            <el-form-item label="岗位名称">
              <el-input v-model="name" />
            </el-form-item>
            <el-form-item label="岗位描述">
              <el-input v-model="name" type="textarea" :rows="4" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogIsShow()">取 消</el-button>
        <el-button type="primary" @click="dialogIsShow()">确 定</el-button>
      </div>
    </el-dialog>

    </el-row>

  </div>

</template>

<script>

  import Treeselect from '@riophae/vue-treeselect'

  import '@riophae/vue-treeselect/dist/vue-treeselect.css'

import Treeselect from '@riophae/vue-treeselect'

import '@riophae/vue-treeselect/dist/vue-treeselect.css'



  export default {

    name: 'DeptManager',

    components: {

      Treeselect

    },

    data() {

      return {

        dialogShowXzgw: false,

        activeName: 'first',

        deptName: '',

        buttonLoading: false,

        deptTree: [],

        dept: this.initDept(),

        jobData: [{

          'prop0': '',

          'prop1': '1',

          'prop2': '市场部总监',

          'prop3': '1'

        }, {

          'prop0': '',

          'prop1': '2',

          'prop2': '市场部经理',

          'prop3': '2'

        }, {

          'prop0': '',

          'prop1': '3',

          'prop2': '高级客户经理',

          'prop3': '5'

        }, {

          'prop0': '',

          'prop1': '4',

          'prop2': '客户经理',

          'prop3': '10'

        }, {

          'prop0': '',

          'prop1': '5',

          'prop2': '销售内勤',

          'prop3': '1'

        }, {

          'prop0': '',

          'prop1': '6',

          'prop2': '销售助理',

          'prop3': '1'

        }],

        rules: {

          deptName: [{

              required: true,

              message: this.$t('rules.require'),

              trigger: 'blur'

            },

            {

              min: 3,

              max: 10,

              message: this.$t('rules.range3to10'),

              trigger: 'blur'

            }

          ]

export default {

  name: 'DeptManager',

  components: {

    Treeselect

  },

  data() {

    return {

      dialogShowXzgw: false,

      activeName: 'first',

      deptName: '',

      buttonLoading: false,

      deptTree: [],

      dept: this.initDept(),

      rules: {

        deptName: [{

          required: true,

          message: this.$t('rules.require'),

          trigger: 'blur'

        },

        {

          min: 3,

          max: 10,

          message: this.$t('rules.range3to10'),

          trigger: 'blur'

        }

        ]

      }

    }

  },

  mounted() {

    this.initDeptTree()

  },

  methods: {

    initDept() {

      return {

        deptId: '',

        deptName: '',

        parentId: null,

        orderNum: 0

      }

    },

    mounted() {

      this.initDeptTree()

    initDeptTree() {

      this.$get('system/dept').then((r) => {

        this.deptTree = r.data.data.rows

      })

    },

    methods: {

      initDept() {

        return {

          deptId: '',

          deptName: '',

          parentId: null,

          orderNum: 0

        }

      },

      initDeptTree() {

        this.$get('system/dept').then((r) => {

          this.deptTree = r.data.data.rows

        })

      },

      exportExcel() {

        this.$download('system/dept/excel', {

          deptName: this.deptName

        }, `dept_${new Date().getTime()}.xlsx`)

      },

      handleNumChange(val) {

        this.dept.orderNum = val

      },

      filterNode(value, data) {

        if (!value) return true

        return data.label.indexOf(value) !== -1

      },

      nodeClick(data) {

        this.dept.parentId = data.parentId

        if (this.dept.parentId === '0') {

          this.dept.parentId = null

        }

        this.dept.orderNum = data.orderNum

        this.dept.deptName = data.label

        this.dept.deptId = data.id

        this.$refs.form.clearValidate()

      },

      add() {

        this.resetForm()

    exportExcel() {

      this.$download('system/dept/excel', {

        deptName: this.deptName

      }, `dept_${new Date().getTime()}.xlsx`)

    },

    handleNumChange(val) {

      this.dept.orderNum = val

    },

    filterNode(value, data) {

      if (!value) return true

      return data.label.indexOf(value) !== -1

    },

    nodeClick(data) {

      this.dept.parentId = data.parentId

      if (this.dept.parentId === '0') {

        this.dept.parentId = null

      }

      this.dept.orderNum = data.orderNum

      this.dept.deptName = data.label

      this.dept.deptId = data.id

      this.$refs.form.clearValidate()

    },

    add() {

      this.resetForm()

      this.$message({

        message: this.$t('tips.createTips'),

        type: 'info'

      })

    },

    deleteDept() {

      const checked = this.$refs.deptTree.getCheckedKeys()

      if (checked.length === 0) {

        this.$message({

          message: this.$t('tips.createTips'),

          type: 'info'

          message: this.$t('tips.noNodeSelected'),

          type: 'warning'

        })

      },

      deleteDept() {

        const checked = this.$refs.deptTree.getCheckedKeys()

        if (checked.length === 0) {

          this.$message({

            message: this.$t('tips.noNodeSelected'),

            type: 'warning'

      } else {

        this.$confirm(this.$t('tips.confirmDeleteNode'), this.$t('common.tips'), {

          confirmButtonText: this.$t('common.confirm'),

          cancelButtonText: this.$t('common.cancel'),

          type: 'warning'

        }).then(() => {

          this.dept.deptIds = checked.join(',')

          this.$delete(`system/dept/${this.dept.deptIds}`).then(() => {

            this.$message({

              message: this.$t('tips.deleteSuccess'),

              type: 'success'

            })

            this.reset()

          })

        } else {

          this.$confirm(this.$t('tips.confirmDeleteNode'), this.$t('common.tips'), {

            confirmButtonText: this.$t('common.confirm'),

            cancelButtonText: this.$t('common.cancel'),

            type: 'warning'

          }).then(() => {

            this.dept.deptIds = checked.join(',')

            this.$delete(`system/dept/${this.dept.deptIds}`).then(() => {

        }).catch(() => {

          this.$refs.deptTree.setCheckedKeys([])

        })

      }

    },

    search() {

      this.$refs.deptTree.filter(this.deptName)

    },

    reset() {

      this.initDeptTree()

      this.deptName = ''

      this.resetForm()

    },

    submit() {

      this.$refs.form.validate((valid) => {

        if (valid) {

          this.buttonLoading = true

          this.dept.createTime = this.dept.modifyTime = null

          if (this.dept.deptId) {

            this.$put('system/dept', { ...this.dept

            }).then(() => {

              this.buttonLoading = false

              this.$message({

                message: this.$t('tips.deleteSuccess'),

                message: this.$t('tips.updateSuccess'),

                type: 'success'

              })

              this.reset()

            })

          }).catch(() => {

            this.$refs.deptTree.setCheckedKeys([])

          })

        }

      },

      search() {

        this.$refs.deptTree.filter(this.deptName)

      },

      reset() {

        this.initDeptTree()

        this.deptName = ''

        this.resetForm()

      },

      submit() {

        this.$refs.form.validate((valid) => {

          if (valid) {

            this.buttonLoading = true

            this.dept.createTime = this.dept.modifyTime = null

            if (this.dept.deptId) {

              this.$put('system/dept', { ...this.dept

              }).then(() => {

                this.buttonLoading = false

                this.$message({

                  message: this.$t('tips.updateSuccess'),

                  type: 'success'

                })

                this.reset()

              })

            } else {

              this.$post('system/dept', { ...this.dept

              }).then(() => {

                this.buttonLoading = false

                this.$message({

                  message: this.$t('tips.createSuccess'),

                  type: 'success'

                })

                this.reset()

              })

            }

          } else {

            return false

            this.$post('system/dept', { ...this.dept

            }).then(() => {

              this.buttonLoading = false

              this.$message({

                message: this.$t('tips.createSuccess'),

                type: 'success'

              })

              this.reset()

            })

          }

        })

      },

      resetForm() {

        this.$refs.form.clearValidate()

        this.$refs.form.resetFields()

        this.dept = this.initDept()

      },

      showXzgw() {

        this.dialogShowXzgw = true

      }

        } else {

          return false

        }

      })

    },

    resetForm() {

      this.$refs.form.clearValidate()

      this.$refs.form.resetFields()

      this.dept = this.initDept()

    }

  }

}

</script>

<style lang="scss" scoped>

  .dept {