Commit c153e854 authored by 姬鋆屾's avatar 姬鋆屾

parent 15a1d4d3
......@@ -67,7 +67,9 @@ export default {
} else if ((url = "/perform/staff/conf/save")) {
sessionStorage.getItem("type") == 1
? (url = "/perform/dept/conf/save")
: (url = "/perform/staff/conf/save");
: sessionStorage.getItem("type") == 2
? (url = "/perform/staff/conf/save")
: (url = "/window/owner/save");
}
const el = this.$refs.form;
el.validate((valid) => {
......
......@@ -158,7 +158,12 @@
</div>
</div>
<div class="mid_table">
<el-table :data="tableData" border style="width: 100%">
<el-table
:data="tableData"
border
style="width: 100%"
height="520"
>
<el-table-column type="index" label="序号" width="50">
</el-table-column>
<el-table-column
......
......@@ -15,11 +15,13 @@
>
<el-row>
<el-row style="width: 100%;margin-bottom: 10px;">
<el-col style="width: 100%;" :span="24">
<el-col style="width: 100%;margin-left: 20px;" :span="24">
<span>选择人员:</span>
<el-button type="primary" @click="() => (dialog = true)"
>点击选择人员</el-button
>
<el-button type="primary" @click="() => (dialog = true)">{{
selectArr && selectArr.length > 0
? `已选择(${selectArr.length})`
: "点击选择人员"
}}</el-button>
</el-col>
</el-row>
<el-row style="width: 96%;margin: 0 auto;">
......@@ -293,19 +295,46 @@
<form-buttons @submit="submitForm" noCancelBtn />
</el-form> -->
<el-dialog title="选择人员" :visible.sync="dialog" width="40%">
<el-dialog
title="选择人员"
:visible.sync="dialog"
:modal="false"
width="60%"
>
<div class="dia_content">
<el-tree
:data="treeData"
:props="defaultProps"
@node-click="handleNodeClick"
></el-tree>
<div class="dia_left">
<div class="title">
选择人员
</div>
<el-tree
:data="treeData"
:props="defaultProps"
show-checkbox
node-key="label"
@check="handleCheckChange"
ref="tree"
></el-tree>
</div>
<div class="dia_right">
<div class="title">
已选择
</div>
<div class="select_content">
<el-tag
v-for="tag in selectArr"
:key="tag.label"
closable
@close="hanleTagClose(tag)"
style="margin-right: 10px;"
>
{{ tag.label }}
</el-tag>
</div>
</div>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false"
>确 定</el-button
>
<el-button @click="dialog = false"> </el-button>
<el-button type="primary" @click="dialog = false"> </el-button>
</span>
</el-dialog>
</el-drawer>
......@@ -332,6 +361,7 @@ export default {
direction: "rtl",
toString: [],
toDate: [],
selectArr: [],
tableData: [
{
core: "-0.5",
......@@ -355,57 +385,46 @@ export default {
],
type: "",
keywords: "",
data: [
treeData: [
{
label: "一级 1",
label: "市民中心",
children: [
{
label: "二级 1-1",
label: "部门1",
children: [
{
label: "三级 1-1-1",
label: "人员1",
},
],
},
],
},
{
label: "一级 2",
children: [
{
label: "二级 2-1",
children: [
{
label: "三级 2-1-1",
label: "人员2",
},
],
},
{
label: "二级 2-2",
children: [
{
label: "三级 2-2-1",
label: "人员3",
},
],
},
],
},
{
label: "一级 3",
children: [
{
label: "二级 3-1",
label: "部门2",
children: [
{
label: "三级 3-1-1",
label: "人员4",
},
{
label: "人员5",
},
{
label: "人员6",
},
],
},
{
label: "二级 3-2",
label: "部门3",
children: [
{
label: "三级 3-2-1",
label: "人员7",
label: "人员8",
label: "人员9",
label: "人员10",
},
],
},
......@@ -420,6 +439,17 @@ export default {
},
methods: {
hanleTagClose(val) {
this.selectArr = this.selectArr.filter((v) => v.label !== val.label);
this.$refs.tree.setCheckedNodes(this.selectArr);
},
handleCheckChange(checkedNodes, checkedKeys) {
console.log(checkedNodes);
console.log(checkedKeys);
checkedKeys.checkedNodes.forEach((v) => {
v.children ? "" : (this.selectArr = [...this.selectArr, v]);
});
},
handleChange(val) {
console.log(val);
},
......@@ -508,4 +538,37 @@ export default {
margin: 0 !important;
}
}
.dia_content {
width: 100%;
height: 100%;
display: flex;
border: 1px solid #e4e7ed;
.dia_left {
width: 50%;
height: 300px;
border-right: 1px solid #e4e7ed;
padding: 20px;
}
.dia_right {
width: 50%;
height: 100%;
padding: 20px;
}
.title {
color: #1890ff;
font-size: 14px;
padding-left: 10px;
position: relative;
margin-bottom: 10px;
&::after {
content: "";
display: block;
border-left: 3px solid #1890ff;
left: 0;
top: 0;
bottom: 0;
position: absolute;
}
}
}
</style>
......@@ -137,6 +137,9 @@ export default {
this.getData();
},
handleClick() {
this.activeName == 1
? sessionStorage.setItem("type", this.type)
: sessionStorage.removeItem("type");
this.getData();
},
async getData() {
......@@ -289,7 +292,7 @@ export default {
display: flex;
flex-wrap: wrap;
.goal_box {
width: 435px;
width: 405px;
height: 270px;
background: inherit;
background-color: rgba(255, 255, 255, 1);
......
<template>
<!-- 弹出框表单 -->
<el-drawer
:title="title"
:visible.sync="open"
:direction="direction"
size="50%"
<!-- 弹出框表单 -->
<el-drawer
:title="title"
:visible.sync="open"
:direction="direction"
size="50%"
>
<el-form
ref="form"
class="window_form_content"
:model="form"
:rules="rules"
label-width="120px"
>
<el-form ref="form" :model="form" :rules="rules" label-width="120px">
<el-row>
<Field
label="负责人姓名"
prop="name"
v-model="form.name"
placeholder="请输入负责人姓名"
/>
<Field
label="联系电话:"
prop="phone"
v-model="form.phone"
placeholder="请输入联系电话"
/>
<el-col style="width: 100%;" :span="24">
<Field
label="选择部门:"
prop="deptId"
v-model="form.deptId"
placeholder="选择部门"
:enumData="deptGroup"
type="select"
/>
</el-col>
</el-row>
<el-row>
<div class="bottom_content">
<div class="content_top">
<span>请选择窗口工作人员:</span>
<div class="search_box">
<el-select v-model="type" placeholder="请选择部门">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
style="width: 200px;"
>
</el-option>
</el-select>
<el-input
v-model="keywords"
placeholder="请输入姓名关键字搜索"
style="width: 200px;margin: 0 10px;"
></el-input>
<el-button type="primary"> 搜索 </el-button>
</div>
</div>
<div class="table_box">
<el-table
:data="tableData"
border
style="width: 100%"
height="520"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55"> </el-table-column>
<el-table-column type="index" label="序号" width="50">
</el-table-column>
<el-table-column prop="name" label="姓名" width="180">
</el-table-column>
<el-table-column prop="id" label="工号"> </el-table-column>
<el-table-column prop="deptaName" label="部门"> </el-table-column>
<el-table-column prop="zhiwei" label="职位"> </el-table-column>
<el-table-column prop="status" label="状态"> </el-table-column>
<el-table-column prop="phone" label="手机号"> </el-table-column>
<el-table-column fixed="right" label="操作" width="120">
<template slot-scope="scope">
<span>{{ scope.row.check ? "已选择" : "选择" }}</span>
</template>
</el-table-column>
</el-table>
</div>
</div>
</el-row>
<form-buttons @submit="submitForm" noCancelBtn />
</el-form>
<!-- <el-form ref="form" :model="form" :rules="rules" label-width="120px">
<el-row>
<Field
label="部门id号"
......@@ -54,95 +137,157 @@
</el-row>
<form-buttons @submit="submitForm" noCancelBtn />
</el-form>
</el-drawer>
</template>
<script>
import form from "@/assets/mixins/formdialog";
export default {
name: "WindowOwnerDetail",
mixins: [form],
components: {},
created() {
this.changePath("window/owner");
</el-form> -->
</el-drawer>
</template>
<script>
import form from "@/assets/mixins/formdialog";
export default {
name: "WindowOwnerDetail",
mixins: [form],
components: {},
created() {
this.changePath("window/owner");
},
data() {
return {
// 遮罩层
loading: true,
// 弹出层标题
title: "窗口负责人",
// 是否显示弹出层
open: false,
direction: "rtl",
toString: [],
toDate: [],
// 表单校验
rules: {},
deptGroup: { 1: "部门1", 2: "部门2", 3: "部门3", 4: "部门4", 5: "部门5" },
options: [
{
value: "1",
label: "部门1",
},
{
value: "2",
label: "部门2",
},
],
type: "",
keywords: "",
tableData: [
{
id: "123456",
name: "xxx",
deptName: "部门1",
zhiwei: "工作人员",
status: "正式",
phone: "130****8888",
check: false,
},
{
id: "123456",
name: "xxx",
deptName: "部门1",
zhiwei: "工作人员",
status: "正式",
phone: "130****8888",
check: false,
},
],
};
},
methods: {
handleSelectionChange(val) {
console.log(val);
this.tableData.forEach((v) => (v.check = false));
val.forEach((v) => {
v.check = true;
});
},
/** 编辑 */
edit(row) {
this.reset();
this.query = { id: row.id };
this.urls.currUrl = "window/owner/edit";
this.getData();
this.pageInfo.type = "edit";
this.title = "修改窗口负责人";
},
/** 新增 */
add(row) {
this.reset();
this.urls.currUrl = "window/owner/add";
this.getData();
this.pageInfo.type = "add";
this.title = "新增窗口负责人";
},
data() {
return {
// 遮罩层
loading: true,
// 弹出层标题
title: "窗口负责人",
// 是否显示弹出层
open: false,
direction: "rtl",
toString: [],
toDate: [],
// 表单校验
rules: {},
/** 查看*/
view(row) {
this.reset();
this.query = { id: row.id };
this.urls.currUrl = "window/owner/view";
this.getData();
this.pageInfo.type = "view";
this.title = "窗口负责人详细";
},
/**取消按钮 */
cancel() {
this.open = false;
},
/**获取数据后弹框 */
afterRender(data) {
this.open = true;
},
afterSubmit(data) {
this.open = false;
this.$emit("ok");
},
// 表单重置
reset() {
this.form = {
deptId: 0,
deptName: "",
name: "",
number: "",
phone: "",
windowCount: null,
remark: "",
};
this.resetForm("form");
},
methods: {
/** 编辑 */
edit(row) {
this.reset();
this.query = { id: row.id };
this.urls.currUrl = "window/owner/edit";
this.getData();
this.pageInfo.type = "edit";
this.title = "修改窗口负责人";
},
/** 新增 */
add(row) {
this.reset();
this.urls.currUrl = "window/owner/add";
this.getData();
this.pageInfo.type = "add";
this.title = "新增窗口负责人";
},
/** 查看*/
view(row) {
this.reset();
this.query = { id: row.id };
this.urls.currUrl = "window/owner/view";
this.getData();
this.pageInfo.type = "view";
this.title = "窗口负责人详细";
},
/**取消按钮 */
cancel() {
this.open = false;
},
/**获取数据后弹框 */
afterRender(data) {
this.open = true;
},
afterSubmit(data) {
this.open = false;
this.$emit("ok");
},
// 表单重置
reset() {
this.form = {
deptId: 0,
deptName: "",
name: "",
number: "",
phone: "",
windowCount: null,
remark: "",
};
this.resetForm("form");
},
resetForm(refName) {
if (this.$refs[refName]) {
this.$refs[refName].resetFields();
}
},
resetForm(refName) {
if (this.$refs[refName]) {
this.$refs[refName].resetFields();
}
},
};
</script>
\ No newline at end of file
},
};
</script>
<style lang="less" scoped>
.window_form_content {
width: 100%;
height: 100%;
padding: 0 20px;
.bottom_content {
width: 100%;
height: 600px;
background-color: rgba(242, 246, 252, 1);
box-sizing: border-box;
border-width: 1px;
border-style: solid;
border-color: rgba(223, 233, 238, 1);
border-radius: 4px;
padding: 20px;
.content_top {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
}
}
}
</style>
......@@ -413,7 +413,7 @@ export default {
display: flex;
flex-wrap: wrap;
.goal_box {
width: 435px;
width: 405px;
height: 238px;
background: inherit;
background-color: rgba(255, 255, 255, 1);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment