@epxing/business 0.0.0-stage → 5.3.0-beta.2

package/src/components/UserFormItem.vue

@@ -0,0 +1,762 @@
+<script>
+// @jsx-vue3（T30 JSX 批：Vue3 JSX 语法，@vue/babel-plugin-jsx 编译）
+
+import { markRaw } from 'vue'
+import { evalWith } from '@epxing/utils/src/eval-with'
+import AddFormItemVue from '@epxing/components/src/add-form-item'
+import { captureRef } from '@epxing/core/src/capture-ref'
+export default {
+  name: 'epx-user-form-item',
+  extends: AddFormItemVue,
+  deptMultiple: true,
+  data () {
+    return {
+      setUserDeptList: [],
+      setChargeDeptList: [],
+      deptList: [],
+      allChargeDeptList: [],
+      showDeptDialog: false,
+      filterText: '',
+      showChargeDeptDialog: false
+    }
+  },
+  computed: {
+    manageDeptList () {
+      let { CHARGE_DEPT, 'CHARGE_DEPT#': chargeDeptNames, 'CHARGE_DEPT##': chargeDeptNameArr } = this.data
+      if (CHARGE_DEPT) {
+        const chargeDeptArr = CHARGE_DEPT.split(',')
+        if (!chargeDeptNameArr) chargeDeptNameArr = chargeDeptNames.split(',')
+        return chargeDeptArr.map((item, index) => ({
+          id: item,
+          name: chargeDeptNameArr[index]
+        }))
+      }
+      return []
+    },
+    transformDeptList () {
+      return this.deptList
+    },
+    userDeptList () {
+      let { USER_DEPT = '', 'USER_DEPT#': userDeptName = '', 'USER_DEPT##': userDeptNameArr, DEPT_ID, CHARGE_DEPT = '' } = this.data
+      if (USER_DEPT) {
+        const userDeptArr = USER_DEPT.split(',')
+        if (!userDeptNameArr) userDeptNameArr = userDeptName.split(',')
+        const chargeDeptArr = (CHARGE_DEPT || '').split(',')
+        return userDeptArr.map((item, index) => ({
+          id: item,
+          name: userDeptNameArr[index],
+          isMain: item === DEPT_ID,
+          isCharge: chargeDeptArr.includes(item)
+        }))
+      }
+      return []
+    },
+    chargeDeptList () {
+      let { CHARGE_DEPT, 'CHARGE_DEPT#': chargeDeptNames, 'CHARGE_DEPT##': chargeDeptNameArr } = this.formData
+      if (CHARGE_DEPT) {
+        const chargeDeptArr = CHARGE_DEPT.split(',')
+        if (!chargeDeptNameArr) chargeDeptNameArr = chargeDeptNames.split(',')
+        return chargeDeptArr.map((item, index) => ({
+          id: item,
+          name: chargeDeptNameArr[index]
+        }))
+      }
+      return []
+    },
+    deptScopeParams () {
+      const { deptScopeParams = [] } = this.$configs
+
+      // 格式化scopeParams
+      const _scopeParams = this.$_.cloneDeep([...deptScopeParams])
+      const that = this
+      for (const scopeKey in _scopeParams) {
+        const scope = _scopeParams[scopeKey]
+        if (!scope) continue
+        let values = scope.values
+        if (/\$\[(.+)\]/.test(values)) {
+          values = values.replace(/\$\[(.+)\]/, (match, key) => {
+            try {
+              return evalWith(`that.$query.${key}`, { that }) || evalWith(`that.$tab.${key}`, { that }) || evalWith(`that.${key}`, { that }) || ''
+            } catch (error) {
+              return scope.values
+            }
+          })
+        }
+        if (/#\{(.+)\}/.test(values)) {
+          values = values.replace(/#\{(.+)\}/, (match, key) => {
+            try {
+              return evalWith(`that.$query.${key}`, { that }) || evalWith(`that.$tab.${key}`, { that }) || ''
+            } catch (error) {
+              return scope.values
+            }
+          })
+        }
+        scope.values = values
+      }
+      return _scopeParams
+    },
+    isCharge () {
+      return id => {
+        return this.chargeDeptList.find(item => item.id === id)
+      }
+    }
+  },
+  watch: {
+    showDeptDialog (v) {
+      if (v) {
+        this.$nextTick(() => {
+          this.$refs.deptSearchInput.focus()
+        })
+      }
+    },
+    filterText (val) {
+      this.$refs.deptTree.filter(val)
+    },
+    'formData.IDENTITY' (v) {
+      // if (v !== 'sj') {
+      //   const userDeptList = [...this.userDeptList]
+      //   userDeptList.map(item => ({ ...item, IS_CHARGE: '0' }))
+      //   this.userDeptList = userDeptList
+      // }
+    }
+  },
+  methods: {
+    filterNode (value, data) {
+      if (!value) return true
+      return (data.text).indexOf(value) !== -1
+    },
+    checkChange (v, flag) {
+      if (this.$configs.deptMultiple === false && flag) {
+        this.$refs.deptTree.setCheckedKeys([v.id])
+      }
+    },
+    treeNodeRender (h, { node, data, store }) {
+      return (
+        <span class="tree-node">
+          <span>{ data.text }</span>
+        </span>
+      )
+    },
+    chargeTreeNodeRender (h, { node, data, store }) {
+      return (
+        <span class="tree-node">
+          <span>{ data.name }</span>
+        </span>
+      )
+    },
+    renderForm () {
+      if (this.fieldsConfigs.length > 0) {
+        return (
+          <div>
+            <div class="form__item">
+              <label class="form__label">任职部门：</label>
+              <div>
+                <ul class="dept-list">
+                  {
+                    this.userDeptList.map(item => (
+                      <li class="dept-item">
+                        {item.isMain && <el-tag class="main-tag" size="small">所属</el-tag>}
+                        {item.isCharge && <el-tag size="small">负责</el-tag> }
+                        <span>{item.name}</span>
+                        { (this.pageType === 'EDIT' || this.pageType === 'ADD') && this.componentType !== 'READONLY' && <i class="dept-item__deleteicon el-icon-close" onClick={this.deleteSelectDept.bind(this, item.id)}></i>}
+                      </li>
+                    ))
+                  }
+                </ul>
+                { (this.pageType === 'EDIT' || this.pageType === 'ADD') && this.componentType !== 'READONLY' && <el-button class="add-dept__btn" size="small" onClick={this.showDeptDialogFn.bind(this)}>+ 添加部门</el-button> }
+                <div class="tips">部门关系：一个人可以有多个任职部门，多个负责部门，一个所属部门，负责部门和所属部门从任职部门中选择</div>
+              </div>
+            </div>
+            <epx-table-form class="form-content" ref="form" metaId={this.$metaId} fieldsConfigs={this.fieldsConfigs} v-model={this.data} column={this.column} labelAlign={this.$configs.labelAlign}></epx-table-form>
+            <div class="form__item">
+              <label class="form__label">负责部门：</label>
+              <div>
+                <ul class="dept-list">
+                  {
+                    this.manageDeptList.map(item => (
+                      <li class="dept-item">
+                        <span>{item.name}</span>
+                        { (this.pageType === 'EDIT' || this.pageType === 'ADD') && <i class="dept-item__deleteicon el-icon-close" onClick={this.deleteSelectChargeDept.bind(this, item.id)}></i>}
+                      </li>
+                    ))
+                  }
+                </ul>
+                { (this.pageType === 'EDIT' || this.pageType === 'ADD') && <el-button class="add-dept__btn" size="small" onClick={this.showChargeDeptDialogFn.bind(this)}>+ 添加部门</el-button> }
+              </div>
+            </div>
+            <el-dialog width="920px" modelValue={this.showDeptDialog} onUpdate:modelValue={v => { this.showDeptDialog = false }} onClose={() => { this.showDeptDialog = false }} class="form-dialog epx-user-form-item__dialog" title="选择用户任职部门">
+              <div class="dept-dialog">
+                <div class="dept-container">
+                  <div class="dept-search">
+                    <el-input
+                      ref={captureRef(this, 'deptSearchInput')}
+                      size="default"
+                      placeholder="输入关键字进行过滤"
+                      v-model={this.filterText}>
+                    </el-input>
+                  </div>
+                  <el-tree
+                    ref={captureRef(this, 'deptTree')}
+                    class="dept-tree"
+                    data={this.transformDeptList}
+                    show-checkbox
+                    default-expand-all={false}
+                    check-strictly={true}
+                    node-key="id"
+                    check-on-click-node={true}
+                    renderContent={this.treeNodeRender}
+                    filter-node-method={this.filterNode}
+                    // onCheckChange={this.checkChange}
+                    onCheckChange={this.addUserDept}
+                  >
+                  </el-tree>
+                </div>
+                <div class="transform-dept">
+                  {/** <el-button type="primary" onClick={this.addUserDept}>&gt;</el-button> */}
+                </div>
+                <div class="dept-container">
+                  <p class="select-dept__title">
+                    <span>已选择的部门</span>
+                    <el-tooltip class="item" effect="dark" content="所属部门为教职工的人事关系所在单位" placement="top-start">
+                      <i style={{ marginLeft: '8px', color: '#666' }} class="el-icon-question"></i>
+                    </el-tooltip>
+                  </p>
+                  <ul class="select-dept__list">
+                    {
+                      this.setUserDeptList.map(item => (
+                        <li class="select-dept__item">
+                          <span class="select-dept__name">
+                            <el-tooltip class="select-dept__tooltip" effect="dark" content={item.name} placement="top">
+                              <span>{item.name}</span>
+                            </el-tooltip>
+                            {item.isMain && <el-tag class="main-tag" size="small">所属</el-tag>}
+                            {item.isCharge && <el-tag size="small">负责</el-tag> }
+                          </span>
+                          <span class="select-dept_operate">
+                            {!item.isMain && <el-button type="primary" link onClick={this.setMainDept.bind(this, item)}>设为主部门</el-button>}
+                            {!item.isCharge ? <el-button type="primary" link onClick={this.setChargeDept.bind(this, item)}>设为负责人</el-button>
+                              : <el-button type="primary" link onClick={this.deleteChargeDept.bind(this, item)}>取消负责人</el-button>
+                            }
+                            <i class="el-icon-close" onClick={this.deleteSetSelectDept.bind(this, item.id)}></i>
+                          </span>
+                        </li>
+                      ))
+                    }
+                  </ul>
+                </div>
+              </div>
+              <div class="dept-dialog-button__group">
+                <el-button size="default" onClick={() => { this.showDeptDialog = false }}>取消</el-button>
+                <el-button size="default" type="primary" onClick={this.saveDept.bind(this)}>保存</el-button>
+              </div>
+            </el-dialog>
+            <el-dialog width="920px" modelValue={this.showChargeDeptDialog} onClose={() => { this.showChargeDeptDialog = false }} class="form-dialog epx-user-form-item__dialog" title="选择用户负责部门">
+              {
+                this.showChargeDeptDialog && (
+                  <div class="dept-dialog" >
+                    <div class="dept-container">
+                      <p class="select-dept__title">
+                        <span>任职部门</span>
+                      </p>
+                      <el-tree
+                        ref={captureRef(this, 'userDeptTree')}
+                        class="dept-tree"
+                        data={this.userDeptList}
+                        show-checkbox
+                        default-expand-all={true}
+                        check-strictly={true}
+                        node-key="id"
+                        renderContent={this.chargeTreeNodeRender}
+                        onCheckChange={this.addChargeDept}
+                      >
+                      </el-tree>
+                    </div>
+                    <div class="transform-dept">
+                      {/* <el-button type="primary" onClick={this.addChargeDept}>&gt;</el-button> */}
+                    </div>
+                    <div class="dept-container">
+                      <p class="select-dept__title">
+                        <span>负责部门</span>
+                      </p>
+                      <ul class="select-dept__list">
+                        {
+                          this.setChargeDeptList.map(item => (
+                            <li class="select-dept__item">
+                              <span class="select-dept__name select-dept__chargename">
+                                <el-tooltip class="select-dept__tooltip" effect="dark" content={item.name} placement="top">
+                                  <span>{item.name}</span>
+                                </el-tooltip>
+                              </span>
+                              <span class="select-dept_operate">
+                                <i class="el-icon-close" onClick={this.deleteSetSelectChargeDept.bind(this, item.id)}></i>
+                              </span>
+                            </li>
+                          ))
+                        }
+                      </ul>
+                    </div>
+                  </div>
+                )
+              }
+
+              <div class="dept-dialog-button__group">
+                <el-button size="default" onClick={() => { this.showChargeDeptDialog = false }}>取消</el-button>
+                <el-button size="default" type="primary" onClick={this.saveChargeDept.bind(this)}>保存</el-button>
+              </div>
+            </el-dialog>
+          </div>
+        )
+      }
+    },
+    getDefaultDept () {
+      let { defaultDept } = this.$configs
+      if (defaultDept) {
+        const that = this
+        if (/\$\[(.+)\]/.test(defaultDept)) {
+          try {
+            const valueKey = defaultDept.replace(/\$\[(.+)\]/, (match, key) => key)
+            defaultDept = evalWith(`that.${valueKey}`, { that }) || evalWith(`that.$query.${valueKey}`, { that }) || evalWith(`that.$tab.${valueKey}`, { that }) || ''
+          } catch (err) {
+            console.error(err)
+            defaultDept = ''
+          }
+        }
+        this.$http.getLabel({
+          entityId: 'FM_DEPT',
+          id: defaultDept
+        })
+          .then(data => {
+            this.userDeptList.push({ DEPT: defaultDept, 'DEPT#': data.label, USER: this.formData.ID, IS_CHARGE: '0', IS_MAIN: '1' })
+          })
+      }
+    },
+    getUserDeptList () {
+      this.getDefaultDept()
+    },
+    getAllDeptList () {
+      this.$http.$post({
+        action: 'getTree',
+        entityId: 'FM_DEPT',
+        scopeParams: JSON.stringify(this.deptScopeParams)
+
+      })
+        .then(data => {
+          // 只读树：markRaw 掐掉整棵树的深度响应式（省的是依赖收集，不是 Proxy 本身）。将来若要改
+          // 树里某个节点并期望 UI 跟着变，正确做法是重新赋一份新数组，而不是把 markRaw 摘掉。
+          this.deptList = data && markRaw(data)
+        })
+    },
+    addUserDept (item, flag) {
+      const index = this.setUserDeptList.findIndex(dept => dept.id === item.id)
+      if (flag) {
+        if (index === -1) {
+          const dept = { id: item.id, name: item.text, isMain: false }
+          if (this.$configs.deptMultiple === false) {
+            this.setUserDeptList = [dept]
+          } else {
+            this.setUserDeptList.push(dept)
+          }
+        }
+      } else {
+        if (index !== -1) {
+          this.setUserDeptList.splice(index, 1)
+        }
+      }
+    },
+    deleteSelectDept (deptId) {
+      const userDeptList = [...this.userDeptList]
+      const index = userDeptList.findIndex(userDept => userDept.id === deptId)
+      if (index !== -1) {
+        userDeptList.splice(index, 1)
+        const mainIndex = this.userDeptList.findIndex(item => item.isMain)
+        this.data.USER_DEPT = userDeptList.map(item => item.id).join(',')
+        this.data['USER_DEPT#'] = userDeptList.map(item => item.name).join(',')
+        if (!mainIndex) {
+          const main = this.userDeptList[0]
+          this.data.DEPT_ID = main ? main.id : ''
+          this.data['DEPT_ID#'] = main ? main.name : ''
+        }
+      }
+    },
+    deleteSetSelectDept (deptId) {
+      const index = this.setUserDeptList.findIndex(userDept => userDept.id === deptId)
+      if (index !== -1) {
+        this.setUserDeptList.splice(index, 1)
+        this.$refs.deptTree.setChecked(deptId, false)
+      }
+    },
+    setMainDept (item) {
+      const deptList = [...this.setUserDeptList]
+      deptList.map(dept => {
+        if (dept.isMain && dept.id !== item.id) {
+          dept.isMain = false
+        }
+        if (dept.id === item.id) {
+          dept.isMain = true
+        }
+      })
+      this.setUserDeptList = deptList
+    },
+    setChargeDept (item) {
+      const deptList = [...this.setUserDeptList]
+      deptList.map(dept => {
+        if (dept.id === item.id) {
+          dept.isCharge = true
+        }
+      })
+      this.setUserDeptList = deptList
+    },
+    deleteChargeDept (item) {
+      const deptList = [...this.setUserDeptList]
+      deptList.map(dept => {
+        if (dept.id === item.id) {
+          dept.isCharge = false
+        }
+      })
+      this.setUserDeptList = deptList
+    },
+    addChargeDept (item, flag) {
+      const index = this.setChargeDeptList.findIndex(dept => dept.id === item.id)
+      if (flag) {
+        if (index === -1) {
+          const dept = { id: item.id, name: item.name }
+          if (this.$configs.deptMultiple === false) {
+            this.setChargeDeptList = [dept]
+          } else {
+            this.setChargeDeptList.push(dept)
+          }
+        }
+      } else {
+        if (index !== -1) {
+          this.setChargeDeptList.splice(index, 1)
+        }
+      }
+    },
+    deleteSelectChargeDept (deptId) {
+      const chargeDeptList = [...this.manageDeptList]
+      const index = chargeDeptList.findIndex(dept => dept.id === deptId)
+      if (index !== -1) {
+        chargeDeptList.splice(index, 1)
+        this.data.CHARGE_DEPT = chargeDeptList.map(item => item.id).join(',')
+        this.data['CHARGE_DEPT#'] = chargeDeptList.map(item => item.name).join(',')
+      }
+    },
+    deleteSetSelectChargeDept (deptId) {
+      const index = this.setChargeDeptList.findIndex(dept => dept.id === deptId)
+      if (index !== -1) {
+        this.setChargeDeptList.splice(index, 1)
+        this.$refs.userDeptTree.setChecked(deptId, false)
+      }
+    },
+    showDeptDialogFn () {
+      this.setUserDeptList = this.$_.cloneDeep(this.userDeptList)
+      this.showDeptDialog = true
+      this.$nextTick(() => {
+        this.$refs.deptTree.setCheckedKeys(this.setUserDeptList.map(item => item.id))
+      })
+    },
+    showChargeDeptDialogFn () {
+      this.setChargeDeptList = this.$_.cloneDeep(this.chargeDeptList)
+      this.showChargeDeptDialog = true
+      this.$nextTick(() => {
+        const keys = this.setChargeDeptList.map(item => item.id)
+        this.$refs.userDeptTree.setCheckedKeys(keys)
+      })
+    },
+    saveDept () {
+      this.data.USER_DEPT = this.setUserDeptList.map(item => item.id).join(',')
+      this.data['USER_DEPT#'] = this.setUserDeptList.map(item => item.name).join(',')
+      this.data['USER_DEPT##'] = this.setUserDeptList.map(item => item.name)
+      const mainDept = this.setUserDeptList.find(item => item.isMain) || this.setUserDeptList[0]
+      this.data.DEPT_ID = mainDept ? mainDept.id : ''
+      this.data['DEPT_ID#'] = mainDept ? mainDept.name : ''
+      const chargeDeptList = this.setUserDeptList.filter(item => item.isCharge)
+      this.data.CHARGE_DEPT = chargeDeptList.map(item => item.id).join(',')
+      this.data['CHARGE_DEPT#'] = chargeDeptList.map(item => item.name).join(',')
+      this.data['CHARGE_DEPT##'] = chargeDeptList.map(item => item.name)
+      this.showDeptDialog = false
+    },
+    saveChargeDept () {
+      this.data.CHARGE_DEPT = this.setChargeDeptList.map(item => item.id).join(',')
+      this.data['CHARGE_DEPT#'] = this.setChargeDeptList.map(item => item.name).join(',')
+      this.data['CHARGE_DEPT##'] = this.setChargeDeptList.map(item => item.name)
+      this.showChargeDeptDialog = false
+    },
+    $refesh () {
+      this.getUserDeptList()
+      this.getAllDeptList()
+    }
+  },
+  created () {
+    this.getUserDeptList()
+    this.getAllDeptList()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+  background: var(--epx-bg-card);
+  &.fold {
+    .form-title-fold__icon {
+      transform: rotate(180deg);
+    }
+    .form-content {
+      height: 0;
+      overflow: hidden;
+    }
+  }
+}
+
+.button-group {
+  text-align: center;
+  padding-bottom: 12px;
+}
+.form-title {
+  padding: 6px 24px;
+  position: relative;
+  overflow: hidden;
+  font-size: var(--epx-font-size-l);
+  line-height: 36px;
+  background: var(--epx-bg-card);
+  &::after {
+    content: '';
+    position: absolute;
+    left: -24px;
+    bottom: 0;
+    width: calc(100% + 48px);
+    height: 1px;
+    background: var(--epx-border);
+  }
+  .form-title-fold__icon {
+    @include font_color_primary;
+    font-size: var(--epx-font-size-xl);
+    cursor: pointer;
+    transition: all .5s;
+    line-height: 36px;
+    margin-left: 10px;
+  }
+}
+
+.form-tilte__simple {
+  margin-bottom: -20px;
+  padding: 6px 12px 0;
+  &::after {
+    display: none;
+  }
+  .form-title-border {
+    border: 0;
+    padding-left: 0;
+  }
+  .form-title__operate {
+    display: none;
+  }
+  .form-title-fold__icon {
+    display: none;
+  }
+}
+.form-title-border{
+  border-left: 3px solid;
+  @include border_color_primary;
+  padding-left: 6px;
+}
+
+.form-title-edit {
+  font-size: var(--epx-font-size-base);
+  line-height: 36px;
+  cursor: pointer;
+  @include font_color_primary;
+  i {
+    margin-right: 4px;
+  }
+}
+.form-content {
+  transition: all .3s;
+  padding: 10px;
+}
+.tips {
+  font-size: var(--epx-font-size-base);
+  color: var(--epx-text);
+}
+.form-note {
+  @include bg_color_primary(.2);
+  @include border_color_primary;
+  @include font_color_primary;
+  border: 1px dashed;
+  padding: 8px 12px;
+  border-radius: var(--epx-radius-base);
+  margin: 0 0 12px;
+  font-size: var(--epx-font-size-base);
+  >i {
+    margin-right: 8px;
+    font-size: var(--epx-font-size-l);
+  }
+}
+.button-group {
+  margin: 16px 0;
+  display: flex;
+  justify-content: center;
+
+    :deep(.el-button) {
+      padding: 12px 42px;
+      margin: 0 12px;
+    }
+
+}
+.form__item {
+  display: flex;
+  &:first-child {
+    margin-bottom: -10px;
+  }
+}
+.form__label {
+  width: 140px;
+  color: var(--epx-text);
+  text-align: right;
+  line-height: 40px;
+  flex-shrink: 0;
+  margin: 0 12px;
+
+}
+.dept-list {
+  display: flex;
+  flex-wrap: wrap;
+}
+.dept-item {
+  border: 1px dashed;
+  border-radius: 3px;
+  line-height: 1;
+  @include bg_color_primary(.2);
+  @include border_color_primary;
+  padding: 6px 10px;
+  margin: 6px 4px;
+  display: flex;
+  align-items: center;
+}
+
+.dept-item__mainicon {
+  display: inline-block;
+  font-size: var(--epx-font-size-s);
+  color: #fff;
+  padding: 3px;
+  border-radius: 50%;
+  @include bg_color_primary;
+  margin-right: 4px;
+}
+.dept-item__deleteicon {
+  margin-left: 6px;
+  cursor: pointer;
+}
+
+.add-dept__btn {
+  margin: 6px 4px;
+}
+.main-tag {
+  margin-right: 4px;
+}
+</style>
+
+<style lang="scss">
+// 弹窗及树节点由 Element Plus 渲染，不携带表单组件的 scopeId。
+.epx-user-form-item__dialog {
+.dept-dialog {
+  display: flex;
+  align-items: center;
+  padding: 10px 0;
+}
+.dept-container {
+  width: 388px;
+  height: 492px;
+  border: 1px solid var(--epx-border);
+  overflow: auto;
+}
+.transform-dept {
+  margin: 0 50px;
+  font-size: var(--epx-font-size-l);
+}
+.dept-search {
+  margin: 10px 20px;
+}
+.dept-tree {
+
+    .el-tree-node__content {
+      height: 48px
+    }
+
+}
+.select-dept__title {
+  padding: 12px 20px;
+  border-bottom: 1px solid var(--epx-border);
+  margin-bottom: 10px;
+  span {
+    &::before {
+      content: '';
+      width: 0;
+      height: 14px;
+      border-left: 4px solid;
+      @include border_color_primary;
+      border-radius: var(--epx-radius-s);
+      margin-right: 4px;
+    }
+  }
+}
+.select-dept__item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 48px;
+  &:hover {
+    @include bg_color_primary(.2);
+  }
+  padding: 0 20px;
+  &:hover {
+    .select-dept_operate {
+      display: block;
+    }
+  }
+}
+.select-dept__name {
+  width: calc(100% - 200px);
+  display: flex;
+}
+.select-dept__chargename {
+  width: calc(100% - 20px);
+}
+.select-dept__tooltip{
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-right: 4px;
+}
+.select-dept__main {
+  flex-shrink: 0;
+  &>i {
+    line-height: 1;
+    padding: 2px 6px;
+    @include font_color_primary;
+    @include bg_color_primary(.2);
+    border: 1px solid;
+    @include border_color_primary;
+    margin-left: 6px;
+    border-radius: var(--epx-radius-s);
+    font-size: var(--epx-font-size-s);
+  }
+}
+.select-dept_operate {
+  display: none;
+  .el-icon-close {
+    cursor: pointer;
+    font-size: var(--epx-font-size-l);
+    margin-left: 4px;
+    position: relative;
+    top: -2px;
+  }
+}
+.dept-dialog-button__group {
+  text-align: right;
+}
+.main-tag {
+  margin-right: 4px;
+}
+}
+</style>