<!-- Vue SFC -->
<template>
<div class="h tableTransparent bxs page-box page-box-top65">
<div class="page-fixed bxs p10 clearfix">
<div class="header clearfix bxs">
<div class="header-item header-lf cupo" @click="backFn">
<i class="el-icon-arrow-left"></i>
<span class="header-lf-btn cor6">返回</span>
</div>
<div class="header-item header-mid h">
<span v-if="!seeSure && !userId">新增用户</span>
<span v-if="!seeSure && userId">编辑用户</span>
<span v-if="seeSure">用户详情</span>
</div>
<div class="header-item header-rt h">
<el-button
v-if="!seeSure"
size="small"
type="primary"
@click="submitFormFn"
>保 存</el-button
>
</div>
</div>
</div>
<div class="page-content p10 h clearfix bxs">
<div class="page-back-fff p10 bxs">
<div class="ml20 title">用户信息</div>
<div>
<div class="mt10">
<!-- 新增 -->
<el-form
ref="form"
:model="form"
:rules="rules"
label-width="210px"
>
<el-row>
<el-col :span="10">
<el-form-item label="用户类型：" :required="!seeSure">
<el-col :span="22">
<el-select
v-if="!seeSure"
class="w"
v-model="form.dataType"
placeholder="请选择用户类型"
disabled
>
<el-option
v-for="item in dataTypes"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
<span v-else>
<span v-for="(item, index) in dataTypes" :key="index">
<span v-if="item.value == form.dataType">{{
item.label
}}</span>
</span>
</span>
</el-col>
</el-form-item>
<el-form-item
label="姓名："
:prop="!seeSure ? 'nickName' : ''"
>
<el-col :span="22">
<el-input
v-if="!seeSure"
v-model="form.nickName"
maxlength="20"
show-word-limit
></el-input>
<span v-else>{{ form.nickName }}</span>
</el-col>
</el-form-item>
</el-col>
<el-col :span="20">
<el-form-item label="所属单位：" :required="!seeSure">
<el-col :span="23">
<div
v-if="!seeSure"
class="page-select-input cupo tl w overflow"
@click="selectCompayFn()"
>
<div class="w overflow">
<div class="text_overflowd">
<div v-if="form.bindDeptNames">
<span>{{ form.bindDeptNames }}</span>
</div>
<span v-else class="cor9">请选择</span>
</div>
</div>
<div class="page-select-input-icon flr">
<i class="corblue el-icon-s-order"></i>
</div>
</div>
<span v-else>
<span>{{ form.bindDeptNames }}</span>
</span>
</el-col>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
</div>
</div>
</div>
<!-- 选部门 -->
<el-dialog title="选择单位" :visible.sync="departShow" width="50%">
<TreeDepart
v-if="departShow"
ref="TreeDepart"
:selectType="false"
:disabledSure="false"
:obj="haveDeparts"
:self="'all'"
/>
<div slot="footer" class="dialog-footer">
<el-button @click="departShow = false">取 消</el-button>
<el-button type="primary" @click="sureSelectDepartFn">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { addUser, updateUser, getByUserId } from "@/api/manage_personManage";
import { resSure } from "@/utils/util";
import TreeDepart from "@/components/common/selectDepart/treeDepart";
import PicNone from "@/components/common/group/picNone";
// 状态关联关键词*
// 全局混入
// 保存表单校验
export default {
name: "proCreateAdd",
components: { TreeDepart, PicNone },
data () {
return {
seeSure: false, //是否查看
userId: "", //编辑或查看用户id
// 用户类型
dataTypes: [
{ label: "内部用户", value: "0" },
{ label: "外部用户", value: "1" },
],
form: {
dataType: "1",//用户类型
nickName: "",//姓名
},
rules: {
nickName: [
{ required: true, message: "请输入用户姓名", trigger: "blur" },
{
pattern: /^[0-9a-zA-Z\u4e00-\u9fa5·]{1,20}$/,
message: "请输入中英文及数字",
},
],
},
listRow: {},//列表页查详情参数
departShow: false,//部门选择弹框
haveDeparts: {},//选中的部门
};
},
created () {
// 是否查看
if (this.$route.params.seeSure) {
this.seeSure = true;
}
// 编辑或查看必要条件
if (this.$route.params.userId) {
this.userId = this.$route.params.userId;
this.getData();
} else {
if (!this.$route.params.newAdd) {
this.backFn();
}
}
if (this.$route.params.listRow) {
this.listRow = this.$route.params.listRow;
}
},
methods: {
// 所属单位
selectCompayFn () {
let ids = [];
ids = this.form.deptIds;
this.haveDeparts = { ids };
this.departShow = true;
},
// 部门确定
sureSelectDepartFn () {
let list = this.$refs.TreeDepart.uniqueValueList;
let form = this.form;
this.form = { ...form };
this.departShow = false;
},
// 获取基本列表数据
async getData () {
const res = await getByUserId(this.userId);
this.form = res.data;
},
backFn () {
this.$router.push({
name: "personList",
params: {
pageIndex: this.pageIndex,
},
});
},
// 保存表单校验1 开始
submitFormFn (num) {
let that = this;
this.$refs["form"].validate((valid) => {
if (valid) {
this.saveBefore(that.form, num);
} else {
return false;
}
});
},
// 保存表单校验2 结束
async saveBefore (form, num) {
var datVal = {
user: form,
deptIds: form.deptIds,
};
if (form.userId) {
const res = await updateUser(datVal);
console.log(res);
let resSureback = resSure(res);
if (!resSureback) {
return;
} else {
this.$message.success("修改成功");
this.$router.push({
name: "personList",
params: {
pageIndex: this.pageIndex,
},
});
}
} else {
const res = await addUser(datVal);
console.log(res);
let resSureback = resSure(res);
if (!resSureback) {
return;
} else {
this.$message.success("保存成功");
this.$router.push({
name: "personList",
params: {
pageIndex: this.pageIndex,
},
});
}
}
},
},
};
</script>
<style lang="scss" scoped>
</style>
