本文已参与「新人创作礼」活动，一起开启掘金创作之路。
今天实现的功能主要是点击左边，右边展示数据变换，或者说右边表格数据更换，或者左边是tree组件，右边是表格。今天之所以来写这个。因为以前面试的一个公司就让我实现这么一块功能。那时候弄了近了两个小时，硬是没有实现。所以对这事还一直记心里的。何况这个功能在现实的项目中也非常常见的。对于一些新人来说，确实有不少难度的，考虑不周的。
我们先看看效果图，
图一
图二
第一幅画代码
<template>
<div class="app-container">
<div class="chy-page">
<div class="chy-page-left">
<div class="chy-label-add">
<div class="chy-label-add-name">标签分组</div>
<div
class="chy-label-add-btn"
@click="addGroupName"
v-hasPermi="['crm:labelGroupManage:add']"
>
添加分组
</div>
</div>
<div class="chy-tabs-list">
<div
class="chy-tabs-item"
v-for="(item, index) in labelList"
:key="index"
:class="index == tabCurrentIndex ? 'chy-tab-active' : ''"
>
<div @click="changeTab(index, item)">
{{ item.groupName }}
</div>
</div>
</div>
</div>
<div class="chy-page-right">
<div class="chy-main-header">
<div>{{ groupName }}({{ countNum }})</div>
<div
class="delete-group-btn"
v-if="!keHuDisabled"
@click="deleteGroupName"
v-hasPermi="['crm:labelGroupManage:remove']"
>
删除分组
</div>
</div>
<div class="chy-main-content">
<div class="chy-form">
<el-form
ref="form"
:model="form"
label-width="120px"
:label-position="labelPosition"
>
<el-form-item label="标签组名称" prop="groupName">
<el-input
v-model="form.groupName"
placeholder="请输入分组名称"
style="width: 200px"
:disabled="keHuDisabled"
/>
<el-button
size="medium"
round
class="chy-save-btn"
@click="onSubmit('保存成功')"
v-hasPermi="['crm:labelGroupManage:edit']"
>保存</el-button
>
</el-form-item>
<el-form-item label="标签颜色" prop="groupName">
<el-color-picker
size="Large"
v-model="form.labelColor"
color-format="hex"
:predefine="predefineColors"
@active-change="handleChange"
@change="saveOkData"
>
</el-color-picker>
</el-form-item>
<el-form-item label="选择类型">
<el-radio-group
v-model="form.selectedType"
@change="savechange"
>
<el-radio :label="1">单选</el-radio>
<el-radio :label="2" :disabled="keHuDisabled">多选</el-radio>
</el-radio-group>
</el-form-item>
<div class="chy-labels-add">
<div
class="chy-labels-add-btn"
@click="addLabel"
v-hasPermi="['crm:labelGroupManage:add']"
>
添加标签
</div>
</div>
<div class="chy-labels-list">
<el-tag
v-for="tag in form.labelJsonList"
:key="tag"
:closable="!keHuDisabled"
size="Large"
:color="form.labelColor"
@close="handleClose(tag)"
v-hasPermi="['crm:labelGroupManage:remove']"
>
{{ tag }}
</el-tag>
</div>
</el-form>
</div>
</div>
</div>
</div>
<!-- 添加分组标签 -->
<el-dialog
:title="title"
:visible.sync="open"
width="1250px"
append-to-body
custom-class="chy-dialog"
>
<el-form
ref="form"
:model="form"
label-width="120px"
:label-position="labelPosition"
>
<!-- 参数配置 begin -->
<div class="chy-add-update-box-new">
<div class="chy-box">
<ChyTitle title="添加分组"></ChyTitle>
<div class="chy-box-card">
<div class="chy-box-row">
<div class="chy-box-col">
<el-form-item label="分组名称" prop="groupName">
<el-input
v-model="form.groupName"
placeholder="请输入分组名称"
maxlength="20"
show-word-limit
/>
你还可以创建{{ 100 - this.labelList.length }}个分组标签
</el-form-item>
</div>
<div class="chy-box-col"></div>
</div>
</div>
</div>
</div>
<!-- 参数配置 end -->
</el-form>
<div slot="footer" class="chy-dialog-footer">
<div class="chy-dialog-footer-btn-item-left">
<el-button @click="open = false" class="chy-btn-cancel"
>取 消</el-button
>
</div>
<div class="chy-dialog-footer-btn-item-right">
<el-button class="chy-btn-ok" @click="submitForm">确 定</el-button>
</div>
</div>
</el-dialog>
<!-- 添加标签 -->
<el-dialog
:title="titleLabel"
:visible.sync="openLabel"
width="1250px"
append-to-body
custom-class="chy-dialog"
>
<el-form
ref="form"
:model="form"
label-width="120px"
:label-position="labelPosition"
>
<!-- 参数配置 begin -->
<div class="chy-add-update-box-new">
<div class="chy-box">
<ChyTitle title="添加标签"></ChyTitle>
<div class="chy-box-card">
<div class="chy-box-row">
<div class="chy-box-col">
<el-form-item label="标签名称" prop="groupName">
<el-input
v-model="labelName"
placeholder="请输入标签名称"
maxlength="10"
show-word-limit
/>
你还可以创建{{ 100 - countNum }}个标签
</el-form-item>
</div>
<div class="chy-box-col"></div>
</div>
</div>
</div>
</div>
<!-- 参数配置 end -->
</el-form>
<div slot="footer" class="chy-dialog-footer">
<div class="chy-dialog-footer-btn-item-left">
<el-button @click="openLabel = false" class="chy-btn-cancel"
>取 消</el-button
>
</div>
<div class="chy-dialog-footer-btn-item-right">
<el-button class="chy-btn-ok" @click="submitFormPush"
>确 定</el-button
>
</div>
</div>
</el-dialog>
</div>
</template>
<script>
import {
xxx1,
xxx2,
xxx3,
xxx4,
xxx5,
xxx6,
} from "@/api/crm/demo";
export default {
name: "LabelGroupManage",
components: {},
data() {
return {
title: "",
open: false,
titleLabel: "", //标签标题
openLabel: false, //标签窗体
labelPosition: "right",
tabCurrentIndex: 0,
groupName: "客户分类",
groupId: undefined,
labelList: [
// {
// groupName: "客户分类",
// groupId: "1486229691525058562",
// },
// {
// groupName: "行业分类",
// groupId: "1486229596922531841",
// },
// {
// groupName: "性别",
// groupId: "1486229485270159361",
// },
// {
// groupName: "学历",
// groupId: "1486229379045216257",
// },
// {
// groupName: "车辆情况",
// groupId: "1486229269896843265",
// },
],
predefineColors: [
"#2580E6",
"#48B274",
"#E69E23",
"#00B16A",
"#9264CD",
"#588AD4",
"#F26C63",
"#7889B9",
"#FC7736",
"#788385",
"#807399",
"#CD8A3E",
"#9E9A27",
"#B76E6E",
"#C8557D",
"#33B1B3",
"#989898",
"#D99428",
"#E16356",
"#5C7BD2",
],
form: {
labelColor: "#D99428", //标签颜色16进制编码
groupName: undefined, //分组名称
selectedType: 1, //标签选择类型,1单选，2多选，前端不选默认为1
labelJsonList: [], //标签名称--新增分组可以添加标签
},
labelName: undefined, //标签名称
countNum: 0, //默认标签数量为0
keHuDisabled: false, //客户分类不可用
isFirst: true, //第一次进入
};
},
created() {
this.getList();
},
mounted() {
this.$nextTick(() => {
this.tableHeight = window.innerHeight - 363; //单行的
//后面100一般是根据你上下导航栏的高度来减掉即可。
});
},
methods: {
/** 查询标签分组管理列表 */
getList() {
this.loading = true;
listLabelGroupManage({}).then((response) => {
this.labelList = response.data;
this.loading = false;
});
let that = this;
setTimeout(() => {
//延时一下、得到子组件的实例
// alert(this.labelList)
if (that.labelList) {
//alert(this.labelList[0].groupId)
if (that.labelList.length > 0) {
that.groupId = that.labelList[0].groupId;
if (that.isFirst) {
that.getGroupInfo(that.groupId); //第一次才请求
that.isFirst = false;
}
}
}
}, 1000);
},
//获取标签详情
getGroupInfo(groupId) {
getLabelByGroupId(groupId).then((response) => {
this.form = response.data;
this.groupName = this.form.groupName;
this.countNum =
(this.form.labelJsonList && this.form.labelJsonList.length) || 0;
this.form.labelJsonList = this.form.labelJsonList || [];
});
},
//添加分组名称
addGroupName() {
this.title = "添加分组";
this.open = true;
this.form = {
labelColor: "#D99428", //标签颜色16进制编码
groupName: undefined, //分组名称
selectedType: 1, //标签选择类型,1单选，2多选，前端不选默认为1
labelJsonList: [], //标签名称--新增分组可以添加标签
};
},
submitForm() {
this.open = false;
if (
this.form.groupName == undefined ||
this.form.groupName == null ||
this.form.groupName == ""
) {
this.$message({
message: "分组不能为空，请输入！",
type: "warning",
});
return;
}
addLabelGroupManage(this.form).then((response) => {
this.msgSuccess("新增成功");
this.open = false;
this.isFirst = true;
this.getList();
});
},
//删除分组
deleteGroupName() {
if (this.countNum != 0) {
this.$message({
message:
"请先删除【" +
this.groupName +
"】下面的子标签，再删除该分组标签！",
type: "error",
});
return;
}
let that = this;
this.$confirm(
"确定要删除分组标签为【" + this.groupName + "】的数据?",
"警告",
{
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "error",
}
)
.then(function () {
return delLabelGroupManage(that.groupId);
})
.then(() => {
that.isFirst = true;
this.getList();
this.msgSuccess("删除成功");
});
},
//改变样式和选择分组
changeTab(index, item) {
this.tabCurrentIndex = index;
this.groupName = item.groupName;
this.form = {
labelColor: "#D99428", //标签颜色16进制编码
groupName: undefined, //分组名称
selectedType: 1, //标签选择类型,1单选，2多选，前端不选默认为1
labelJsonList: [], //标签名称--新增分组可以添加标签
};
if (item.groupName == "客户分类") {
this.keHuDisabled = true;
} else {
this.keHuDisabled = false;
}
this.groupId = item.groupId;
this.getGroupInfo(item.groupId);
},
//颜色转换
handleChange(value) {
const reg = /[0-9]\d+/g;
const getArr = value.match(reg);
let hexStr =
"#" + ((getArr[0] << 16) | (getArr[1] << 8) | getArr[2]).toString(16);
console.log(hexStr);
},
//颜色保存
saveOkData(vale) {
this.onSubmit("颜色更新成功");
},
//选择单选或多选保存
savechange() {
this.onSubmit("操作成功");
},
//添加标签打开窗体
addLabel() {
this.titleLabel = "添加标签";
this.openLabel = true;
this.labelName = undefined; //清空
},
//添加标签
submitFormPush() {
if (
this.labelName != undefined &&
this.labelName != null &&
this.labelName != ""
) {
this.form.labelJsonList.push(this.labelName);
this.openLabel = false;
this.countNum = this.form.labelJsonList.length;
let tempData = {
groupId: this.groupId,
labelJsonList: this.form.labelJsonList,
};
//添加标签数据
addRemoveLabel(tempData).then((response) => {
this.msgSuccess("添加标签成功");
this.open = false;
this.getGroupInfo(this.form.groupId);
});
} else {
this.$message({
message: "标签不能为空，请输入！",
type: "warning",
});
return;
}
},
//删除标签
handleClose(tag) {
let that = this;
this.$confirm("确定要删除标签为【" + tag + "】的数据?", "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(function () {
that.form.labelJsonList.splice(
that.form.labelJsonList.indexOf(tag),
1
);
that.countNum = that.form.labelJsonList.length;
})
.then(() => {
//this.getList();
//this.msgSuccess("删除成功");
this.onSubmit("删除成功");
});
},
//保存到数据库
onSubmit(tispText) {
tispText = tispText || "保存成功";
updateLabelGroupManage(this.form).then((response) => {
this.msgSuccess(tispText);
this.open = false;
this.getList();
this.getGroupInfo(this.form.groupId);
});
},
},
};
</script>
<style scoped>
.chy-page {
display: flex;
}
.chy-page-left {
width: 200px;
height: 100%;
background: #fff;
border-radius: 10px;
}
.chy-label-add {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 10px;
}
.chy-label-add-name {
color: #333333;
}
.chy-label-add-btn {
color: #fff;
background: #409eff;
padding: 8px 15px;
border-radius: 20px;
}
.chy-tabs-list {
display: flex;
flex-direction: column;
text-align: left;
justify-content: center;
align-items: center;
align-content: center;
margin: 0 0 20px 0;
height: 100%;
}
.chy-tabs-item {
width: 100%;
height: 40px;
padding: 0 10px;
line-height: 40px;
}
.chy-tab-active {
background: #f2f2f2;
color: #02a7f0;
}
.chy-page-right {
flex: 1;
height: 100%;
margin-left: 10px;
border-radius: 10px;
}
.chy-main-header {
padding: 10px;
height: 50px;
border-radius: 10px;
background: #fff;
margin-bottom: 10px;
line-height: 35px;
display: flex;
justify-content: space-between;
}
.delete-group-btn {
padding: 10px 15px;
border-radius: 10px;
background: #ec808d;
color: #fff;
line-height: 12px;
}
.chy-main-content {
border-radius: 10px;
padding: 10px;
background: #fff;
}
.chy-form {
padding: 1px;
}
.chy-labels-add {
background: #eeeeee;
padding-left: 30px;
border-radius: 10px;
height: 60px;
display: flex;
align-items: center;
}
.chy-labels-add-btn {
background: #409eff;
padding: 8px;
border-radius: 20px;
width: 100px;
color: #fff;
text-align: center;
}
.chy-labels-list {
padding: 10px;
}
::v-deep .el-tag {
color: #ffffff;
}
::v-deep .el-tag .el-tag__close {
color: #ffffff;
}
.chy-save-btn {
margin-left: 20px;
width: 80px;
background: #409eff;
color: #fff;
}
/**************弹窗相关样式begin************* */
::v-deep .chy-dialog {
background: #eeeeee !important;
border-radius: 20px !important;
/* height: 700px !important; */
}
::v-deep .chy-dialog .el-dialog__header {
border-top-left-radius: 20px !important;
border-top-right-radius: 20px !important;
height: 40px !important;
padding: 10px 0 0px 0 !important;
}
::v-deep .chy-dialog .el-dialog__header .el-dialog__title {
font-size: 20px !important;
font-weight: bold !important;
color: #333333 !important;
margin-left: 15px !important;
}
::v-deep .chy-dialog .el-dialog__headerbtn {
position: absolute !important;
top: 10px !important;
right: 20px !important;
padding: 0 !important;
background: transparent !important;
border: none;
outline: none;
cursor: pointer;
font-size: 22px !important;
font-weight: bold !important;
}
::v-deep .chy-dialog .el-dialog__body {
padding: 0px 40px 5px !important;
background: #eeeeee !important;
/* height: 500px !important; */
/* overflow-y: scroll !important; */
margin: 10px 0 0 0;
}
::v-deep .chy-dialog .el-dialog__footer {
padding: 2px 10px 10px 10px !important;
}
.chy-view-box {
height: 380px !important;
}
.chy-add-update-box {
height: 125px !important;
}
.chy-add-update-box-new {
height: 155px !important;
}
.chy-box:last-child {
margin-bottom: 0px !important;
}
.chy-box-card {
width: 100%;
}
/***新增和修改状态下 */
::v-deep .chy-box .el-input__inner,
::v-deep .chy-box .el-textarea__inner {
background: #eeeeee !important;
border-radius: 10px !important;
}
/**自定义下拉框长度设置 */
::v-deep .chy-box .el-select {
width: 100% !important;
}
.chy-box-row {
display: flex !important;
justify-content: center !important;
align-items: center !important;
padding: 10px 0 !important;
}
.chy-box-col {
flex: 5 !important;
}
/***输入框靠左边显示 */
::v-deep .chy-box .chy-box-col-value .el-input .el-input__inner {
text-align: left;
}
</style>
第二幅画代码
<template>
<div class="app-container">
<div class="chy-page">
<div class="chy-page-left">
<div class="chy-label-add">
<div class="chy-label-add-name">合同对象</div>
<div class="chy-label-add-btn" @click="addObjectName" v-if="false">
添加对象
</div>
</div>
<div class="chy-tabs-list">
<div
class="chy-tabs-item"
v-for="(item, index) in objectList"
:key="index"
:class="index == tabCurrentIndex ? 'chy-tab-active' : ''"
>
<div @click="changeTab(index, item)" class="chy-left-text">
{{ item.objectName }}
</div>
<div
class="chy-right-icon"
@click="deleteObjectName(item)"
v-if="false"
>
<i class="el-icon-error"></i>
</div>
</div>
</div>
<div class="chy-btn-box"></div>
</div>
<div class="chy-page-right">
<div class="chy-main-header">
<div class="box-left">{{ objectName }}({{ countNum }})</div>
<div class="box-right">
<div class="delete-group-btn" @click="addOtherPerson">合同抄送</div>
<div
v-hasPermi="['contract:contractTemplate:add']"
class="delete-group-btn"
@click="addandEditContractTemplate({}, 'add')"
>
添加模板
</div>
</div>
</div>
<div class="chy-main-content">
<div class="chy-form">
<div class="chy-table-test">
<!-- <el-row :gutter="10" class="chy-mb8">
<chy-right-toolbar
:showExcel="false"
v-hasPermi="['service:accessoriesType:add']"
@add="addAndEditSonItem({}, 'add')"
></chy-right-toolbar>
</el-row> -->
<el-table :data="contractTemplateList" :height="tableHeight">
<el-table-column
prop="templateName"
label="合同名称"
></el-table-column>
<el-table-column
prop="copiedName"
label="抄送人"
></el-table-column>
<el-table-column
prop="legalSignPerName"
label="法务签署人"
></el-table-column>
<el-table-column label="模板ID">
<template slot-scope="scope">
{{ scope.row.eqbTemplateId }}
</template>
</el-table-column>
<el-table-column
label="操作"
class-name="small-padding fixed-width"
width="220"
>
<template slot-scope="scope">
<div class="chy-btn-list">
<div class="chy-btn-item">
<el-button
type="text"
class="chy-btn-edit"
v-hasPermi="['contract:contractTemplate:edit']"
@click="addandEditContractTemplate(scope.row, 'edit')"
>编辑</el-button
>
</div>
<div class="chy-btn-item">
<el-button
type="text"
class="chy-btn-delete"
v-hasPermi="['contract:contractTemplate:remove']"
@click="handleDelete(scope.row)"
>删除
</el-button>
</div>
<div class="chy-btn-item">
<el-button
type="text"
class="chy-btn-edit"
@click="chyAddOtherPersonRow(scope.row)"
>合同抄送</el-button
>
</div>
</div>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total > 0"
:total="total"
:page.sync="pageNum"
:limit.sync="pageSize"
@pagination="getContractTemplateListVue"
/>
</div>
</div>
</div>
</div>
</div>
<!-- 添加对象 -->
<el-dialog
:title="title"
:visible.sync="open"
width="1250px"
append-to-body
custom-class="chy-dialog"
>
<el-form
ref="form"
:model="form"
label-width="120px"
:label-position="labelPosition"
>
<!-- 参数配置 begin -->
<div class="chy-add-update-box-new">
<div class="chy-box">
<!-- <ChyTitle title="添加分组"></ChyTitle> -->
<div class="chy-box-card">
<div class="chy-box-row">
<div class="chy-box-col">
<el-form-item label="对象名称" prop="objectName">
<el-input
v-model="form.objectName"
placeholder="请输入对象名称"
maxlength="20"
show-word-limit
/>
</el-form-item>
</div>
<div class="chy-box-col"></div>
</div>
</div>
</div>
</div>
<!-- 参数配置 end -->
</el-form>
<div slot="footer" class="chy-dialog-footer">
<div class="chy-dialog-footer-btn-item-left">
<el-button @click="open = false" class="chy-btn-cancel"
>取 消</el-button
>
</div>
<div class="chy-dialog-footer-btn-item-right">
<el-button class="chy-btn-ok" @click="submitForm">确 定</el-button>
</div>
</div>
</el-dialog>
<!-- 添加标签 -->
<el-dialog
:title="titleContractTemp"
:visible.sync="openContractTemp"
v-if="openContractTemp"
width="1250px"
append-to-body
custom-class="chy-dialog"
>
<el-form
ref="form"
:model="formContractTemp"
label-width="120px"
:label-position="labelPosition"
>
<!-- 参数配置 begin -->
<div class="chy-add-update-box-old">
<div class="chy-box">
<!-- <ChyTitle title="添加标签"></ChyTitle> -->
<div class="chy-box-card">
<div class="chy-box-row">
<div class="chy-box-col">
<el-form-item label="合同模板名称" prop="templateName">
<el-input
v-model="formContractTemp.templateName"
placeholder="请输入合同模板名称"
maxlength="50"
show-word-limit
/>
</el-form-item>
</div>
<div class="chy-box-col">
<el-form-item label="合同模板id" prop="eqbTemplateId">
<el-input
v-model="formContractTemp.eqbTemplateId"
placeholder="请输入合同模板id"
maxlength="50"
show-word-limit
/>
</el-form-item>
</div>
<!-- <div class="chy-box-col"></div> -->
</div>
</div>
</div>
</div>
<!-- 参数配置 end -->
</el-form>
<div slot="footer" class="chy-dialog-footer">
<div class="chy-dialog-footer-btn-item-left">
<el-button @click="openContractTemp = false" class="chy-btn-cancel"
>取 消</el-button
>
</div>
<div class="chy-dialog-footer-btn-item-right">
<el-button class="chy-btn-ok" @click="submitFormPush"
>确 定</el-button
>
</div>
</div>
</el-dialog>
<!-- 添加抄送人 -->
<el-dialog
:title="titleOterPerson"
:visible.sync="openOterPerson"
width="1250px"
append-to-body
custom-class="chy-dialog"
>
<el-form
ref="form"
:model="formOterPerson"
label-width="120px"
:label-position="labelPosition"
>
<!-- 参数配置 begin -->
<div class="chy-add-update-box-new">
<div class="chy-box">
<ChyTitle title="合同抄送人"></ChyTitle>
<div class="chy-box-card">
<div
class="chy-box-row"
v-for="(item, index) in formOterPerson.personList"
:key="index"
>
<div class="chy-box-col">
<el-form-item label="姓名" prop="perId">
<el-select
v-model="item.perId"
placeholder="请选择"
filterable
@change="(value) => selectText(value, item)"
clearable
>
<el-option
v-for="item in userList"
:key="item.perId"
:label="item.perName"
:value="item.perId"
>
</el-option>
</el-select>
</el-form-item>
</div>
<div class="chy-box-col chy-delete-box">
<div class="chy-delete-box-left">
<el-form-item label="手机号" prop="perMobile">
<el-input
v-model="item.perMobile"
placeholder="请输入手机号"
/>
</el-form-item>
</div>
<div class="chy-delete-box-right">
<el-button type="danger" @click="deleteItem(item, index)"
>删除</el-button
>
</div>
</div>
</div>
<div class="chy-box-row">
<div class="chy-box-col">
<el-form-item>
<el-button type="primary" @click="addMorePerson"
>添加个人</el-button
>
</el-form-item>
</div>
<div class="chy-box-col"></div>
</div>
</div>
</div>
<div class="chy-box">
<ChyTitle title="法务签署人"></ChyTitle>
<div class="chy-box-card">
<div class="chy-box-row">
<div class="chy-box-col">
<el-form-item label="姓名" prop="perId">
<el-select
v-model="formOterPerson.perId"
@change="selectTextLegalSign"
filterable
clearable
placeholder="请选择"
>
<el-option
v-for="item in userList"
:key="item.perId"
:label="item.perName"
:value="item.perId"
>
</el-option>
</el-select>
</el-form-item>
</div>
<div class="chy-box-col">
<el-form-item label="手机号" prop="perMobile">
<el-input
v-model="formOterPerson.perMobile"
placeholder="请输入手机号"
/>
</el-form-item>
</div>
</div>
</div>
</div>
</div>
<!-- 参数配置 end -->
</el-form>
<div slot="footer" class="chy-dialog-footer">
<div class="chy-dialog-footer-btn-item-left">
<el-button @click="openOterPerson = false" class="chy-btn-cancel"
>取 消</el-button
>
</div>
<div class="chy-dialog-footer-btn-item-right">
<el-button class="chy-btn-ok" @click="submitFormPerson"
>确 定</el-button
>
</div>
</div>
</el-dialog>
</div>
</template>
<script>
import {
xxxxdemo
} from "@/api/demo2";
export default {
name: "contractTemplate",
components: {},
data() {
return {
tableHeight: 520,
title: "",
open: false,
titleContractTemp: "", //合同模板窗体标题
openContractTemp: false, //窗体窗体
formContractTemp: {},
actionType: "",
labelPosition: "right",
tabCurrentIndex: 0,
objectName: "企业",
objectId: undefined, //对象ID
objectList: [],
form: {
objectName: undefined, //分组名称
},
countNum: 0, //默认标签数量为0
isFirst: true, //第一次进入
contractTemplateList: [],
pageSize: 10,
pageNum: 1,
queryParams: {
current: 1,
size: 10,
objectId: undefined,
},
total: 0,
//添加抄送人
titleOterPerson: "",
openOterPerson: false,
formOterPerson: {
templateId: "0",
personList: [
{
perId: undefined,
perName: undefined,
perMobile: undefined,
},
],
perId: undefined,
perName: undefined,
perMobile: undefined,
},
userList: [], //抄送人列表
};
},
created() {
this.getList();
this.getListChyPersonalInfo();
},
mounted() {
this.$nextTick(() => {
this.tableHeight = window.innerHeight - 273; //单行的
//后面100一般是根据你上下导航栏的高度来减掉即可。
});
},
methods: {
/** 查询标签分组管理列表 */
getList() {
this.loading = true;
listContractObject({}).then((response) => {
this.objectList = response.data;
this.loading = false;
});
let that = this;
setTimeout(() => {
//延时一下、得到子组件的实例
// alert(this.labelList)
if (that.objectList) {
//alert(this.labelList[0].groupId)
if (that.objectList.length > 0) {
that.objectId = that.objectList[0].objectId;
that.objectName = that.objectList[0].objectName;
if (that.isFirst) {
that.getContractTemplateListVue(that.objectId); //第一次才请求
that.isFirst = false;
}
}
}
}, 1000);
},
//添加对象
addObjectName() {
this.title = "添加对象";
this.open = true;
this.form = {
objectName: undefined, //分组名称
};
},
submitForm() {
this.open = false;
if (
this.form.objectName == undefined ||
this.form.objectName == null ||
this.form.objectName == ""
) {
this.msgError("对象不能为空，请输入!");
return;
}
addContractObject(this.form).then((response) => {
this.msgSuccess("新增成功");
this.open = false;
this.isFirst = true;
this.getList();
});
},
//删除对象
deleteObjectName(item) {
if (this.countNum != 0) {
this.$message({
message:
"请先删除【" + item.objectName + "】下面的合同模板，再删除该对象！",
type: "error",
});
return;
}
let that = this;
this.$confirm(
"确定要删除对象为【" + item.objectName + "】的数据?",
"警告",
{
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "error",
}
)
.then(function () {
return delContractObject(item.objectId);
})
.then(() => {
that.isFirst = true;
this.msgSuccess("删除成功");
this.getList();
});
},
//改变样式和选择对象
changeTab(index, item) {
this.tabCurrentIndex = index;
this.objectName = item.objectName;
this.objectId = item.objectId;
this.getContractTemplateListVue(this.objectId); //
},
//合同模板查询接口
getContractTemplateListVue(objectId) {
this.loading = true;
let that = this;
this.queryParams.size = that.pageSize;
this.queryParams.current = that.pageNum;
this.queryParams.objectId = objectId;
getContractTemplateList(this.queryParams).then((response) => {
this.contractTemplateList = response.rows;
this.total = response.total;
this.countNum = response.total;
this.loading = false;
});
},
//添加合同模板
addandEditContractTemplate(row, actionType) {
this.titleContractTemp = "添加合同模板";
this.openContractTemp = true;
this.formContractTemp = { ...row };
this.actionType = actionType;
},
//添加合同模板
submitFormPush() {
// if (
// this.formContractTemp.contractTemplateName == undefined &&
// this.formContractTemp.contractTemplateName == null &&
// this.formContractTemp.contractTemplateName == ""
// ) {
// this.msgError("合同模板名称不能为空，请输入");
// return;
// }
let that = this;
if (
this.formContractTemp.eqbTemplateId == undefined ||
this.formContractTemp.eqbTemplateId == null ||
this.formContractTemp.eqbTemplateId == ""
) {
this.msgError("合同模板ID不能为空，请输入");
return;
}
if (
this.formContractTemp.templateName == undefined ||
this.formContractTemp.templateName == null ||
this.formContractTemp.templateName == ""
) {
this.msgError("合同模板名称不能为空，请输入");
return;
}
if (this.actionType == "add") {
let tempData = {
objectId: this.objectId,
templateName: this.formContractTemp.templateName,
eqbTemplateId: this.formContractTemp.eqbTemplateId,
};
//添加合同
addContractTemplate(tempData).then((response) => {
this.msgSuccess("添加模板成功");
this.openContractTemp = false;
this.getContractTemplateListVue(that.objectId);
});
} else {
//修改合同
let tempData = {
templateId: this.formContractTemp.templateId,
templateName: this.formContractTemp.templateName,
eqbTemplateId: this.formContractTemp.eqbTemplateId,
};
updateContractTemplate(tempData).then((response) => {
this.msgSuccess("修改模板成功");
this.openContractTemp = false;
this.getContractTemplateListVue(that.objectId);
});
}
//添加合同模板
},
//删除标签
handleDelete(tag) {
let that = this;
this.$confirm(
"确定要删除合同模板为【" + tag.templateName + "】的数据?",
"警告",
{
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}
)
.then(function () {
let data = [tag.templateId];
return delContractTemplate(data);
})
.then(() => {
//this.getList();
that.msgSuccess("删除成功");
that.getContractTemplateListVue(that.objectId);
});
},
//抄送人列表
getListChyPersonalInfo() {
listChyPersonalInfo({}).then((response) => {
this.userList = response.data;
});
},
//添加抄送人
addOtherPerson() {
this.openOterPerson = true;
this.titleOterPerson = "合同抄送";
this.formOterPerson = {
templateId: "0",
personList: [
{
perId: undefined,
perName: undefined,
perMobile: undefined,
},
],
perId: undefined,
perName: undefined,
perMobile: undefined,
};
},
chyAddOtherPersonRow(row) {
this.openOterPerson = true;
this.titleOterPerson = "合同抄送";
this.formOterPerson = {
templateId: row.templateId,
personList: [
{
perId: undefined,
perName: undefined,
perMobile: undefined,
},
],
perId: undefined,
perName: undefined,
perMobile: undefined,
};
},
selectText(perId, item) {
let tempItem = this.userList.find((inItem) => inItem.perId == perId);
// console.log(tempItem,"tempItem")
item.perId = tempItem.perId;
item.perName = tempItem.perName;
item.perMobile = tempItem.perMobile;
},
//法务人
selectTextLegalSign(value) {
let tempItem = this.userList.find((inItem) => inItem.perId == value);
this.formOterPerson.perId = tempItem.perId;
this.formOterPerson.perName = tempItem.perName;
this.formOterPerson.perMobile = tempItem.perMobile;
},
//添加抄送人
addMorePerson() {
this.formOterPerson.personList.push({
userName: undefined,
userId: undefined,
mobile: undefined,
});
},
deleteItem(item, index) {
this.formOterPerson.personList.splice(
this.formOterPerson.personList.indexOf(item),
1
);
},
//提交到数据库
submitFormPerson() {
let that = this;
if (that.formOterPerson.personList?.length == 0) {
that.msgError("合同抄送人必须有一个");
return;
} else {
that.formOterPerson.personList.forEach((item, index) => {
if (
item.perId == null ||
item.perId == undefined ||
item.perId == ""
) {
that.msgError(
`第【${index + 1}】个合同抄送人信息不能为空，请检查!`
);
return;
}
});
if (
that.formOterPerson.perId == undefined ||
that.formOterPerson.perId == null ||
that.formOterPerson.perId == ""
) {
that.msgError("法务签署人信息不能为空，请检查");
return;
}
}
let addDbData = {
templateId: that.formOterPerson.templateId,
copiedPerIdList: that.formOterPerson.personList.map((item) => {
return item.perId;
}),
legalSignPerId: that.formOterPerson.perId,
};
// console.log(addDbData, "addDbData");
// return;
opSignInform(addDbData).then((response) => {
that.msgSuccess("操作成功");
that.openOterPerson = false;
});
},
},
};
</script>
<style scoped lang="scss">
.chy-page {
display: flex;
justify-content: space-between;
}
.chy-page-left {
width: 200px !important;
height: 100%;
background: #fff;
border-radius: 10px;
}
.chy-label-add {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 10px;
}
.chy-label-add-name {
color: #333333;
font-weight: bold;
}
.chy-label-add-btn {
color: #fff;
background: #409eff;
padding: 8px 15px;
border-radius: 20px;
}
.chy-tabs-list {
display: flex;
flex-direction: column;
text-align: left;
justify-content: center;
align-items: center;
align-content: center;
margin: 0 0 20px 0;
height: 100%;
}
.chy-tabs-item {
width: 100%;
height: 40px;
padding: 0 10px;
line-height: 40px;
display: flex;
justify-content: space-between;
align-items: center;
.chy-left-text {
flex: 1;
}
.chy-right-icon {
width: 20px;
}
}
.chy-tab-active {
background: #f2f2f2;
color: #02a7f0;
}
.chy-page-right {
flex: 1;
height: 100%;
margin-left: 10px;
border-radius: 10px;
overflow: hidden;
}
.chy-main-header {
padding: 10px;
height: 50px;
border-radius: 10px;
background: #fff;
margin-bottom: 10px;
line-height: 35px;
display: flex;
justify-content: space-between;
align-items: center;
.box-left {
flex: 1;
}
.box-right {
width: 200px;
justify-content: space-between;
align-items: center;
display: flex;
}
}
.delete-group-btn {
padding: 10px 15px;
border-radius: 20px;
background: #02a7f0;
color: #fff;
line-height: 12px;
}
.chy-main-content {
border-radius: 10px;
padding: 10px;
background: #fff;
}
.chy-form {
padding: 1px;
}
.chy-labels-add {
background: #eeeeee;
padding-left: 30px;
border-radius: 10px;
height: 60px;
display: flex;
align-items: center;
}
.chy-labels-add-btn {
background: #409eff;
padding: 8px;
border-radius: 20px;
width: 100px;
color: #fff;
text-align: center;
}
.chy-labels-list {
padding: 10px;
}
::v-deep .el-tag {
color: #ffffff;
}
::v-deep .el-tag .el-tag__close {
color: #ffffff;
}
.chy-save-btn {
margin-left: 20px;
width: 80px;
background: #409eff;
color: #fff;
}
/**************弹窗相关样式begin************* */
::v-deep .chy-dialog {
background: #eeeeee !important;
border-radius: 20px !important;
/* height: 700px !important; */
}
::v-deep .chy-dialog .el-dialog__header {
border-top-left-radius: 20px !important;
border-top-right-radius: 20px !important;
height: 40px !important;
padding: 10px 0 0px 0 !important;
}
::v-deep .chy-dialog .el-dialog__header .el-dialog__title {
font-size: 20px !important;
font-weight: bold !important;
color: #333333 !important;
margin-left: 15px !important;
}
::v-deep .chy-dialog .el-dialog__headerbtn {
position: absolute !important;
top: 10px !important;
right: 20px !important;
padding: 0 !important;
background: transparent !important;
border: none;
outline: none;
cursor: pointer;
font-size: 22px !important;
font-weight: bold !important;
}
::v-deep .chy-dialog .el-dialog__body {
padding: 0px 40px 5px !important;
background: #eeeeee !important;
/* height: 500px !important; */
overflow-y: scroll !important;
margin: 10px 0 0 0;
}
::v-deep .chy-dialog .el-dialog__footer {
padding: 2px 10px 10px 10px !important;
}
.chy-view-box {
height: 380px !important;
}
.chy-add-update-box {
height: 125px !important;
}
.hy-add-update-box-old {
height: 105px !important;
}
.chy-add-update-box-new {
height: 405px !important;
}
.chy-box:last-child {
margin-bottom: 0px !important;
}
.chy-box-card {
width: 100%;
}
/***新增和修改状态下 */
::v-deep .chy-box .el-input__inner,
::v-deep .chy-box .el-textarea__inner {
background: #eeeeee !important;
border-radius: 10px !important;
}
/**自定义下拉框长度设置 */
::v-deep .chy-box .el-select {
width: 100% !important;
}
.chy-box-row {
display: flex !important;
justify-content: center !important;
align-items: center !important;
padding: 10px 0 !important;
}
.chy-box-col {
flex: 5 !important;
}
/***输入框靠左边显示 */
::v-deep .chy-box .chy-box-col-value .el-input .el-input__inner {
text-align: left;
}
.chy-btn-box {
padding: 10px;
}
.chy-delete-box {
display: flex;
justify-content: space-between;
align-items: center;
.chy-delete-box-left {
flex: 1;
}
.chy-delete-box-right {
width: 80px;
}
}
</style>
当然了，还有很多无用代码，如果需要用到，可以在里面挑选。剔出无用的代码。我这里也只是做一个记录和参考。
