From d4b9b197632366be60796f059030394aef6802ea Mon Sep 17 00:00:00 2001
From: WXL <wl_5969728@163.com>
Date: 星期日, 17 五月 2026 19:29:30 +0800
Subject: [PATCH] 专家类型多选
---
src/views/project/externalperson/index.vue | 382 ++++++++++++++++++++++++++++++++++--------------------
1 files changed, 241 insertions(+), 141 deletions(-)
diff --git a/src/views/project/externalperson/index.vue b/src/views/project/externalperson/index.vue
index a7be87d..dd83482 100644
--- a/src/views/project/externalperson/index.vue
+++ b/src/views/project/externalperson/index.vue
@@ -31,6 +31,8 @@
placeholder="璇烽�夋嫨璐﹀彿绫诲埆"
clearable
size="small"
+ multiple
+ collapse-tags
>
<el-option
v-for="dict in dict.type.sys_UserType"
@@ -114,12 +116,19 @@
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" align="center" />
- <el-table-column label="璐﹀彿绫诲埆" align="center" prop="usertype">
+ <el-table-column label="璐﹀彿绫诲埆" align="center" prop="usertype" width="200">
<template slot-scope="scope">
- <dict-tag
- :options="dict.type.sys_UserType"
- :value="scope.row.usertype"
- />
+ <div v-if="scope.row.usertype">
+ <el-tag
+ v-for="type in getTypeList(scope.row.usertype)"
+ :key="type"
+ size="small"
+ style="margin-right: 5px; margin-bottom: 3px"
+ >
+ {{ getTypeLabel(type) }}
+ </el-tag>
+ </div>
+ <span v-else>-</span>
</template>
</el-table-column>
<el-table-column label="璐﹀彿缂栧彿" align="center" prop="userno" />
@@ -143,24 +152,11 @@
align="center"
prop="unitname"
/>
- <!--
- <el-table-column label="鎬у埆" align="center" prop="sex">
- <template slot-scope="scope">
- <dict-tag :options="dict.type.sys_user_sex" :value="scope.row.sex" />
- </template>
- </el-table-column>
- <el-table-column label="鍗曚綅宸ヤ綔缂栧彿" align="center" prop="personnelunitno" />
- <el-table-column label="鍦ㄨ亴鐘舵��" align="center" prop="userstatus">
- <template slot-scope="scope">
- <dict-tag :options="dict.type.sys_0_1" :value="scope.row.userstatus" />
- </template>
- </el-table-column>
- <el-table-column label="鑱旂郴鐢佃瘽" width="200" align="center" prop="telephone" />
- <el-table-column label="鑱旂郴鍦板潃" width="250" align="center" prop="address" />-->x
<el-table-column
label="鎿嶄綔"
align="center"
class-name="small-padding fixed-width"
+ width="150"
>
<template slot-scope="scope">
<el-button
@@ -200,9 +196,15 @@
>
<el-form ref="form" :model="form" :rules="rules" label-width="120px">
<el-row>
- <el-col :span="12"
- ><el-form-item label="璐﹀彿绫诲埆" prop="usertype">
- <el-select v-model="form.usertype" placeholder="璇烽�夋嫨璐﹀彿绫诲埆">
+ <el-col :span="12">
+ <el-form-item label="璐﹀彿绫诲埆" prop="usertype">
+ <el-select
+ v-model="form.usertype"
+ placeholder="璇烽�夋嫨璐﹀彿绫诲埆"
+ multiple
+ collapse-tags
+ style="width: 100%"
+ >
<el-option
v-for="dict in dict.type.sys_UserType"
:key="dict.value"
@@ -232,7 +234,7 @@
<el-form-item
label="鍚敤鐘舵��"
prop="userstatus"
- :disabled="ismanager == false"
+ :disabled="!ismanager"
>
<el-radio-group v-model="form.userstatus">
<el-radio
@@ -245,78 +247,87 @@
</el-form-item>
</el-col>
</el-row>
- <el-row v-if="form.usertype != 'org'">
- <el-col :span="24">
- <el-form-item label="韬唤璇佸彿" prop="idcardno">
- <el-input v-model="form.idcardno" placeholder="璇疯緭鍏ヨ韩浠借瘉鍙�" />
- </el-form-item>
- </el-col>
- </el-row>
- <el-row v-if="form.usertype != 'org'"
- ><el-col :span="12">
- <el-form-item label="鎬у埆" prop="sex">
- <el-select v-model="form.sex" placeholder="璇烽�夋嫨鎬у埆">
- <el-option
- v-for="dict in dict.type.sys_user_sex"
- :key="dict.value"
- :label="dict.label"
- :value="dict.value"
- ></el-option> </el-select
- ></el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="鑱岀О" prop="title">
- <el-select v-model="form.title" placeholder="璇烽�夋嫨浜哄憳鑱岀О">
- <el-option
- v-for="dict in dict.type.sys_professionaltitle"
- :key="dict.value"
- :label="dict.label"
- :value="dict.value"
- ></el-option>
- </el-select>
- </el-form-item>
- </el-col>
- </el-row>
- <el-row v-if="form.usertype != 'org'">
- <el-col :span="12">
- <el-form-item label="鎵�鍦ㄥ崟浣�" prop="unitname">
- <el-select
- v-model="form.unitno"
- placeholder="鎵�鍦ㄥ崟浣�"
- clearable
- filterable
- allow-create
- style="width: 100%"
- >
- <el-option
- v-for="(spec, index) in unitList"
- :key="index"
- :label="spec.organizationname"
- :value="spec.organizationid"
- ></el-option>
- </el-select>
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="鍗曚綅宸ュ彿" prop="personnelunitno">
- <el-input
- v-model="form.personnelunitno"
- placeholder="璇疯緭鍏ユ墍鍦ㄥ崟浣嶇殑宸ュ彿"
- />
- </el-form-item>
- </el-col>
- </el-row>
+
+ <!-- 涓汉淇℃伅锛堝綋涓嶅寘鍚�'org'绫诲瀷鏃舵樉绀猴級 -->
+ <div v-if="!hasOrgType(form.usertype)">
+ <el-row>
+ <el-col :span="24">
+ <el-form-item label="韬唤璇佸彿" prop="idcardno">
+ <el-input v-model="form.idcardno" placeholder="璇疯緭鍏ヨ韩浠借瘉鍙�" />
+ </el-form-item>
+ </el-col>
+ </el-row>
+ <el-row>
+ <el-col :span="12">
+ <el-form-item label="鎬у埆" prop="sex">
+ <el-select v-model="form.sex" placeholder="璇烽�夋嫨鎬у埆" style="width: 100%">
+ <el-option
+ v-for="dict in dict.type.sys_user_sex"
+ :key="dict.value"
+ :label="dict.label"
+ :value="dict.value"
+ ></el-option>
+ </el-select>
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="鑱岀О" prop="title">
+ <el-select v-model="form.title" placeholder="璇烽�夋嫨浜哄憳鑱岀О" style="width: 100%">
+ <el-option
+ v-for="dict in dict.type.sys_professionaltitle"
+ :key="dict.value"
+ :label="dict.label"
+ :value="dict.label"
+ ></el-option>
+ </el-select>
+ </el-form-item>
+ </el-col>
+ </el-row>
+ <el-row>
+ <el-col :span="12">
+ <el-form-item label="鎵�鍦ㄥ崟浣�" prop="unitname">
+ <el-select
+ v-model="form.unitno"
+ placeholder="鎵�鍦ㄥ崟浣�"
+ clearable
+ filterable
+ allow-create
+ style="width: 100%"
+ >
+ <el-option
+ v-for="(spec, index) in unitList"
+ :key="index"
+ :label="spec.organizationname"
+ :value="spec.organizationid"
+ ></el-option>
+ </el-select>
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="鍗曚綅宸ュ彿" prop="personnelunitno">
+ <el-input
+ v-model="form.personnelunitno"
+ placeholder="璇疯緭鍏ユ墍鍦ㄥ崟浣嶇殑宸ュ彿"
+ />
+ </el-form-item>
+ </el-col>
+ </el-row>
+ </div>
+
+ <!-- 閾惰淇℃伅锛堟墍鏈夌被鍨嬮兘鏄剧ず锛� -->
<el-row>
- <el-col :span="24"
- ><el-form-item label="寮�鎴烽摱琛�" prop="depositbank">
+ <el-col :span="24">
+ <el-form-item label="寮�鎴烽摱琛�" prop="depositbank">
<el-input
v-model="form.depositbank"
placeholder="璇疯緭鍏ュ紑鎴烽摱琛屽悕绉�"
/>
</el-form-item>
</el-col>
- <el-col :span="24"
- ><el-form-item label="閾惰鍗″彿" prop="bankcardno">
+ </el-row>
+ <el-row>
+ <el-col :span="24">
+ <el-form-item label="閾惰鍗″彿" prop="bankcardno">
<el-input
v-model="form.bankcardno"
placeholder="璇疯緭鍏ラ摱琛屽崱鍙�"
@@ -324,6 +335,8 @@
</el-form-item>
</el-col>
</el-row>
+
+ <!-- 鑱旂郴淇℃伅 -->
<el-row>
<el-col :span="24">
<el-form-item label="鑱旂郴鍦板潃" prop="address">
@@ -338,13 +351,6 @@
</el-form-item>
</el-col>
</el-row>
- <!--
- <el-row>
- <el-col :span="24"><el-form-item label="寮�鎴锋敮琛�" prop="branchbankname">
- <el-input v-model="form.branchbankname" placeholder="璇疯緭鍏ュ紑鎴锋敮琛�" /> </el-form-item>
- </el-col>
- </el-row>
- -->
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">纭� 瀹�</el-button>
@@ -417,17 +423,42 @@
datequery: false
},
// 琛ㄥ崟鍙傛暟
- form: {},
+ form: {
+ usertype: [] // 鍒濆鍖栦负鏁扮粍
+ },
// 琛ㄥ崟鏍￠獙
rules: {
usertype: [
- { required: true, message: "璇疯緭鍏ヨ处鎴风被鍨�", trigger: "blur" }
+ {
+ required: true,
+ message: "璇疯嚦灏戦�夋嫨涓�涓处鍙风被鍒�",
+ trigger: "change",
+ validator: (rule, value, callback) => {
+ if (!value || (Array.isArray(value) && value.length === 0)) {
+ callback(new Error("璇疯嚦灏戦�夋嫨涓�涓处鍙风被鍒�"));
+ } else {
+ callback();
+ }
+ }
+ }
],
username: [
{ required: true, message: "璇疯緭鍏ヨ处鎴峰悕绉�", trigger: "blur" }
],
idcardno: [
- { required: true, message: "璇疯緭鍏ヨ韩浠借瘉鍙风爜", trigger: "blur" }
+ {
+ required: true,
+ message: "璇疯緭鍏ヨ韩浠借瘉鍙风爜",
+ trigger: "blur",
+ validator: (rule, value, callback) => {
+ // 褰撲笉鍖呭惈'org'绫诲瀷鏃讹紝韬唤璇佸彿涓哄繀濉�
+ if (!this.hasOrgType(this.form.usertype) && (!value || value.trim() === '')) {
+ callback(new Error("璇疯緭鍏ヨ韩浠借瘉鍙风爜"));
+ } else {
+ callback();
+ }
+ }
+ }
],
bankcardno: [
{ required: true, message: "璇疯緭鍏ラ摱琛岃处鍙�", trigger: "blur" }
@@ -444,9 +475,41 @@
this.getUserProfile();
this.getUnitList();
// 榛樿涓嶆墦寮�
- // this.getList();
+ this.getList();
},
methods: {
+ // 妫�鏌ユ槸鍚﹀寘鍚�'org'绫诲瀷
+ hasOrgType(usertype) {
+ if (!usertype) return false;
+ if (Array.isArray(usertype)) {
+ return usertype.includes('org');
+ } else if (typeof usertype === 'string') {
+ return usertype.includes('org');
+ }
+ return false;
+ },
+
+ // 灏嗛�楀彿鍒嗛殧鐨勫瓧绗︿覆杞崲涓烘暟缁�
+ getTypeList(usertypeStr) {
+ if (!usertypeStr) return [];
+ if (typeof usertypeStr === 'string') {
+ return usertypeStr.split(',').filter(item => item.trim() !== '');
+ } else if (Array.isArray(usertypeStr)) {
+ return usertypeStr;
+ }
+ return [];
+ },
+
+ // 鑾峰彇绫诲瀷鏍囩
+ getTypeLabel(type) {
+ const dict = this.dict.type.sys_UserType;
+ if (dict) {
+ const item = dict.find(item => item.value === type);
+ return item ? item.label : type;
+ }
+ return type;
+ },
+
//鑾峰彇褰撳墠鐢ㄦ埛淇℃伅
getUserProfile() {
getUserProfile().then(res => {
@@ -464,28 +527,28 @@
/** 鏌ヨ鍗曚綅銆佷汉鍛樿处鍙峰垪琛� */
getList() {
- if (
- this.queryParams.username === null ||
- this.queryParams.username.replace(/\s/g, "") == ""
- ) {
- this.$modal.msgWarning(
- "鏌ユ壘璐︽埛鏃讹紝璐︽埛鍚嶇О涓嶈兘涓虹┖锛岃杈撳叆璐︽埛鍚嶇О锛�"
- );
- return;
+ this.loading = true;
+ // 澶勭悊鏌ヨ鍙傛暟锛屽鏋滄槸鏁扮粍鍒欒浆鎹负閫楀彿鍒嗛殧鐨勫瓧绗︿覆
+ const params = { ...this.queryParams };
+ if (Array.isArray(params.usertype) && params.usertype.length > 0) {
+ params.usertype = params.usertype.join(',');
}
- // this.loading = true;
- listExternalperson(this.queryParams).then(response => {
+ listExternalperson(params).then(response => {
this.externalpersonList = response.rows;
this.total = response.total;
- // this.loading = false;
+ this.loading = false;
+ }).catch(() => {
+ this.loading = false;
});
},
+
// 鍙栨秷鎸夐挳
cancel() {
this.open = false;
this.reset();
},
+
// 琛ㄥ崟閲嶇疆
reset() {
this.form = {
@@ -493,7 +556,7 @@
userno: null,
username: null,
userstatus: 0,
- usertype: null,
+ usertype: [], // 閲嶇疆涓烘暟缁�
personnelunitno: null,
delFlag: null,
createBy: null,
@@ -505,81 +568,103 @@
};
this.resetForm("form");
},
+
/** 鎼滅储鎸夐挳鎿嶄綔 */
handleQuery() {
console.log("handleQuery", this.queryParams);
- if (
- this.queryParams.username === null ||
- this.queryParams.username.replace(/\s/g, "") == ""
- ) {
- this.$modal.msgWarning(
- "涓洪檺鍒舵壒閲忔煡鎵捐处鎴蜂俊鎭紝闄愬埗璐︽埛鍚嶇О涓哄繀杈撻」锛岃杈撳叆璐︽埛鍚嶇О鍚庡啀鎼滅储锛�"
- );
- return;
- }
-
this.queryParams.pageNum = 1;
this.getList();
},
+
/** 閲嶇疆鎸夐挳鎿嶄綔 */
resetQuery() {
this.resetForm("queryForm");
+ this.queryParams.usertype = []; // 閲嶇疆涓烘暟缁�
this.handleQuery();
},
+
// 澶氶�夋閫変腑鏁版嵁
handleSelectionChange(selection) {
this.ids = selection.map(item => item.id);
this.single = selection.length !== 1;
this.multiple = !selection.length;
},
+
/** 鏂板鎸夐挳鎿嶄綔 */
handleAdd() {
this.reset();
this.open = true;
this.title = "娣诲姞浜哄憳/鍗曚綅璐﹀彿淇℃伅";
},
+
/** 淇敼鎸夐挳鎿嶄綔 */
handleUpdate(row) {
this.reset();
const id = row.id || this.ids;
getExternalperson(id).then(response => {
- this.form = response.data;
+ const data = response.data;
+ // 灏嗘暟鎹簱涓殑閫楀彿鍒嗛殧瀛楃涓茶浆鎹负鏁扮粍
+ if (data.usertype && typeof data.usertype === 'string') {
+ data.usertype = data.usertype.split(',').filter(item => item.trim() !== '');
+ } else if (!data.usertype) {
+ data.usertype = [];
+ }
+ this.form = data;
this.open = true;
this.title = "浜哄憳/鍗曚綅璐﹀彿淇℃伅淇敼";
});
},
+
/** 鎻愪氦鎸夐挳 */
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
- console.log("unitList", this.unitList);
+ // 澶勭悊鍗曚綅淇℃伅
this.unitList.map(res => {
- if (res.organizationid == this.form.unitno)
+ if (res.organizationid == this.form.unitno) {
this.form.unitname = res.organizationname;
+ }
});
- console.log(this.form);
- if (this.form.id != null) {
- updateExternalperson(this.form).then(response => {
+
+ // 灏嗘暟缁勮浆鎹负閫楀彿鍒嗛殧鐨勫瓧绗︿覆
+ const submitData = { ...this.form };
+ if (Array.isArray(submitData.usertype) && submitData.usertype.length > 0) {
+ submitData.usertype = submitData.usertype.join(',');
+ } else {
+ submitData.usertype = '';
+ }
+
+ console.log("鎻愪氦鏁版嵁:", submitData);
+
+ if (submitData.id != null) {
+ updateExternalperson(submitData).then(response => {
this.$modal.msgSuccess("淇敼鎴愬姛");
this.open = false;
- this.queryParams.username = this.form.username;
+ this.queryParams.username = submitData.username;
this.getList();
+ }).catch(error => {
+ console.error("淇敼澶辫触:", error);
});
} else {
getOnlyCode(this.seqnoParams).then(res => {
- this.form.userno = res.data.currentvalue;
+ submitData.userno = res.data.currentvalue;
- addExternalperson(this.form).then(response => {
+ addExternalperson(submitData).then(response => {
this.$modal.msgSuccess("鏂板鎴愬姛");
this.open = false;
- this.queryParams.username = this.form.username;
+ this.queryParams.username = submitData.username;
this.getList();
+ }).catch(error => {
+ console.error("鏂板澶辫触:", error);
});
+ }).catch(error => {
+ console.error("鑾峰彇缂栧彿澶辫触:", error);
});
}
}
});
},
+
/** 鍒犻櫎鎸夐挳鎿嶄綔 */
handleDelete(row) {
const ids = row.id || this.ids;
@@ -594,9 +679,15 @@
})
.catch(() => {});
},
+
/** 瀵煎嚭鎸夐挳鎿嶄綔 */
handleExport() {
- const queryParams = this.queryParams;
+ const queryParams = { ...this.queryParams };
+ // 澶勭悊鏌ヨ鍙傛暟锛屽鏋滄槸鏁扮粍鍒欒浆鎹负閫楀彿鍒嗛殧鐨勫瓧绗︿覆
+ if (Array.isArray(queryParams.usertype) && queryParams.usertype.length > 0) {
+ queryParams.usertype = queryParams.usertype.join(',');
+ }
+
this.$modal
.confirm("鏄惁纭瀵煎嚭鎵�鏈変汉鍛�/鍗曚綅璐﹀彿淇℃伅鏁版嵁椤癸紵")
.then(() => {
@@ -607,22 +698,31 @@
this.$download.name(response.msg);
this.exportLoading = false;
})
- .catch(() => {});
+ .catch(() => {
+ this.exportLoading = false;
+ });
},
//鑾峰彇鍖荤枟鏈烘瀯鍒楄〃
getUnitList() {
listOrganization(3).then(response => {
- for (let i = 0; i < response.rows.length; i++) {
- this.unitList.push({
- //organizationid: response.rows[i].organizationid,
- organizationid: response.rows[i].id.toString(),
- organizationname: response.rows[i].organizationname
- });
- console.log(this.unitList);
- }
+ this.unitList = response.rows.map(item => ({
+ organizationid: item.id.toString(),
+ organizationname: item.organizationname
+ }));
+ console.log("鍖荤枟鏈烘瀯鍒楄〃:", this.unitList);
});
}
}
};
</script>
+
+<style scoped>
+::v-deep .el-select .el-tag {
+ margin: 2px 6px 2px 0;
+}
+
+::v-deep .el-select .el-tag__close {
+ margin-left: 4px;
+}
+</style>
--
Gitblit v1.9.3