|
|
@@ -0,0 +1,204 @@
|
|
|
+<template>
|
|
|
+ <el-dialog :title="$t('selectingParticipants')" :visible.sync="participantsVisible" :close-on-click-modal="false"
|
|
|
+ customClass="customWidth" width="500px" :before-close="changeVisable">
|
|
|
+ <div class="tree" style="height:400px">
|
|
|
+ <el-scrollbar style="height:100%">
|
|
|
+ <el-input v-if="user.userNameNeedTranslate != 1" :placeholder="$t('keywordfiltering')"
|
|
|
+ v-model="participantsFilterText">
|
|
|
+ </el-input>
|
|
|
+
|
|
|
+ <div v-if="user.userNameNeedTranslate == '1'">
|
|
|
+ <el-input :placeholder="$t('qingShuShuRuGuanJianZiGuoLv')" v-model.trim="participantsFilterText"
|
|
|
+ class="input-with-select" @keyup.enter.native="echartDepartment()">
|
|
|
+ <el-button slot="append" icon="el-icon-search" @click="echartDepartment()"></el-button>
|
|
|
+ </el-input>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <el-tree :data="deptMembData" show-checkbox :props="defaultProps" node-key="id" ref="chooseMembTree2"
|
|
|
+ @check-change="onTreeItemChange" :default-checked-keys="alreadyPartArray" highlight-current
|
|
|
+ :filter-node-method="filterNode" v-loading="filterNodeFlag">
|
|
|
+ <span class="custom-tree-node" slot-scope="{ node, data }">
|
|
|
+ <span v-if="user.userNameNeedTranslate == '1'">
|
|
|
+ <span v-if="node.data.children">
|
|
|
+ <TranslationOpenDataText type='departmentName' :openid='node.label'>
|
|
|
+ </TranslationOpenDataText>
|
|
|
+ </span>
|
|
|
+ <span v-else>
|
|
|
+ <TranslationOpenDataText type='userName' :openid='node.label'></TranslationOpenDataText>
|
|
|
+ </span>
|
|
|
+ </span>
|
|
|
+ <span v-if="user.userNameNeedTranslate != '1'">
|
|
|
+ {{ node.label }}
|
|
|
+ </span>
|
|
|
+ </span>
|
|
|
+ </el-tree>
|
|
|
+ </el-scrollbar>
|
|
|
+ </div>
|
|
|
+ <div>{{ $t('btn.choose') }} {{ chosenMembCount }} {{ $t('other.people') }}</div>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="changeVisable()">{{ $t('btn.cancel') }}</el-button>
|
|
|
+ <el-button type="primary" @click="submitData()">{{ $t('btn.determine') }}</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ name: '',
|
|
|
+ components: {},
|
|
|
+ props: {
|
|
|
+ visible: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ participantsFilterText: '',
|
|
|
+ participantsVisible: false,
|
|
|
+ filterNodePersonnel: [],
|
|
|
+ chosenMembCount: 0,
|
|
|
+ alreadyPartArray: [], // 已参与的人员
|
|
|
+ filterNodeFlag: false,
|
|
|
+ user: JSON.parse(sessionStorage.getItem("user")),
|
|
|
+ permissions: JSON.parse(sessionStorage.getItem("permissions")),
|
|
|
+ deptMembData: [
|
|
|
+ {
|
|
|
+ id: 0,
|
|
|
+ label: this.$t('lable.unassigned'),
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ defaultProps: {
|
|
|
+ children: 'children',
|
|
|
+ label: 'label'
|
|
|
+ },
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {},
|
|
|
+ watch: {
|
|
|
+ visible(val) {
|
|
|
+ console.log('执行')
|
|
|
+ this.participantsVisible = val
|
|
|
+ },
|
|
|
+ participantsFilterText(val) {
|
|
|
+ let { userNameNeedTranslate } = JSON.parse(sessionStorage.getItem("user"))
|
|
|
+ if (userNameNeedTranslate != 1) {
|
|
|
+ this.$refs.chooseMembTree2.filter(val);
|
|
|
+ }
|
|
|
+ if (!val) {
|
|
|
+ this.$refs.chooseMembTree2.filter(val);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() { },
|
|
|
+ mounted() {
|
|
|
+ this.getDepartmentList()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ submitData() {
|
|
|
+ let chosenList = this.$refs.chooseMembTree2.getCheckedNodes();
|
|
|
+ let chose2 = chosenList.filter(item => item.isUser == 1)
|
|
|
+ if((chose2 || []).length == 0) {
|
|
|
+ this.$message({
|
|
|
+ message: this.$t('pleaseselectpersonnel'),
|
|
|
+ type: "error"
|
|
|
+ });
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.$refs.chooseMembTree2.setCheckedKeys([]);
|
|
|
+ this.$emit("submitParticipant", chose2)
|
|
|
+ },
|
|
|
+ changeVisable(done) {
|
|
|
+ this.$refs.chooseMembTree2.setCheckedKeys([]);
|
|
|
+ this.$emit("changeParticipant", false)
|
|
|
+ if (done) {
|
|
|
+ done()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 筛选逻辑
|
|
|
+ filterNode(value, data) {
|
|
|
+ let { userNameNeedTranslate } = this.user
|
|
|
+ if (!value) return true;
|
|
|
+ if (userNameNeedTranslate != '1') {
|
|
|
+ return data.label.indexOf(value) !== -1;
|
|
|
+ } else {
|
|
|
+ return this.filterNodePersonnel.some(item => item.includes(data.label))
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 选中改变
|
|
|
+ onTreeItemChange() {
|
|
|
+ var chosenList = this.$refs.chooseMembTree2.getCheckedNodes();
|
|
|
+ var list = chosenList.filter(item => item.isUser == 1);
|
|
|
+ this.chosenMembCount = list.length;
|
|
|
+ },
|
|
|
+ echartDepartment() {
|
|
|
+ if (this.participantsFilterText != '') {
|
|
|
+ this.filterNodeFlag = true
|
|
|
+ this.http.post("/user/getEmployeeList", {
|
|
|
+ keyword: this.participantsFilterText,
|
|
|
+ cursor: '',
|
|
|
+ departmentId: -1,
|
|
|
+ pageIndex: 1,
|
|
|
+ pageSize: 1000
|
|
|
+ },
|
|
|
+ res => {
|
|
|
+ if (res.code == "ok") {
|
|
|
+ this.filterNodePersonnel = res.data.records.map(item => item.name)
|
|
|
+ this.$refs.chooseMembTree2.filter(this.participantsFilterText);
|
|
|
+ } else {
|
|
|
+ this.$message({
|
|
|
+ message: res.msg,
|
|
|
+ type: "error"
|
|
|
+ });
|
|
|
+ }
|
|
|
+ this.filterNodeFlag = false
|
|
|
+ },
|
|
|
+ error => {
|
|
|
+ this.filterNodeFlag = false
|
|
|
+ this.$message({
|
|
|
+ message: error,
|
|
|
+ type: "error"
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getDepartmentList() {
|
|
|
+ this.http.post('/department/listAllMemb', {
|
|
|
+ }, res => {
|
|
|
+ if (res.code == 'ok') {
|
|
|
+ let list = res.data
|
|
|
+ this.haveUsersList(list)
|
|
|
+ this.deptMembData = JSON.parse(JSON.stringify(list))
|
|
|
+ } else {
|
|
|
+ this.$message({
|
|
|
+ message: res.msg,
|
|
|
+ type: 'error'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }, error => {
|
|
|
+ this.$message({
|
|
|
+ message: error,
|
|
|
+ type: 'error'
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ haveUsersList(list) {
|
|
|
+ for (var i in list) {
|
|
|
+ if (list[i].children != null) {
|
|
|
+ this.haveUsersList(list[i].children);
|
|
|
+ }
|
|
|
+ if (list[i].userList != null) {
|
|
|
+ if (list[i].children == null) {
|
|
|
+ list[i].children = [];
|
|
|
+ }
|
|
|
+ list[i].userList.forEach(element => {
|
|
|
+ var obj = { id: element.id, label: element.name, parentId: element.departmentId, isUser: 1 };
|
|
|
+ list[i].children.push(obj);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style scoped lang='scss'></style>
|
