douzhuo 1 год назад
Родитель
Сommit
08ab57cb1f
1 измененных файлов: 405 добавлений и 198 удалений
  1. +405
    -198
      src/views/Template/Pinspeakwords.vue

+ 405
- 198
src/views/Template/Pinspeakwords.vue Просмотреть файл

@@ -4,126 +4,303 @@
<div class="content-left">
<div v-if="orgType != 3">
<span style="color: red">*</span> 项目选择:
<el-select v-model="houseId" size="mini" @change="selectChange" clearable :disabled="disabledcet"
placeholder="请选择">
<el-option v-for="item in houseList" :key="item.value" :label="item.label" :value="item.value">
<el-select
v-model="houseId"
size="mini"
@change="selectChange"
clearable
:disabled="disabledcet"
placeholder="请选择"
>
<el-option
v-for="item in houseList"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
<div class="select" style="display: flex;margin-top: 40px;">
<div style="font-size:18px;font-weight: bold;">添加模板</div>
<div class="select" style="display: flex; margin-top: 40px">
<div style="font-size: 18px; font-weight: bold">添加模板</div>
<el-row>
<el-col :offset="18" :span="6">
<el-button size="mini" type="primary" @click="addBigNode">添加大类</el-button>
<el-button size="mini" type="primary" @click="addBigNode"
>添加大类</el-button
>
</el-col>
</el-row>

</div>
<input ref="input" style="display:none" value='${tempId}' />
<input ref="input" style="display: none" value="${tempId}" />

<el-tree ref="tree" :data="treeList" :default-checked-keys="defaultCheck" show-checkbox node-key="id"
default-expand-all :check-on-click-node="true" :expand-on-click-node="false" draggable :allow-drop="allowDrop"
:allow-drag="allowDrag" @node-drop="Peerdrag">
<el-tree
ref="tree"
:data="treeList"
:default-checked-keys="defaultCheck"
show-checkbox
node-key="id"
default-expand-all
:check-on-click-node="true"
:expand-on-click-node="false"
draggable
:allow-drop="allowDrop"
:allow-drag="allowDrag"
@node-drop="Peerdrag"
>
<span class="custom-tree-node" slot-scope="{ node, data }">
<span> <b v-if="data.sign == 0 && data.houseId == null" style="color: red">*</b> {{ node.label }}</span>
<span>
<el-button style="color:red;" v-if="node.level == 1" type="text" size="mini"
@click.stop="() => append(node, data)">添加子类</el-button>
<b
v-if="data.sign == 0 && data.houseId == null"
style="color: red"
>*</b
>
{{ node.label }}</span
>
<span>
<el-button
style="color: red"
v-if="node.level == 1"
type="text"
size="mini"
@click.stop="() => append(node, data)"
>添加子类</el-button
>
<span v-if="data.houseId != null">
<el-button v-if="node.level == 2" type="text" size="mini" @click.stop="() => append1(node, data)"> 添加子类
<el-button
v-if="node.level == 2"
type="text"
size="mini"
@click.stop="() => append1(node, data)"
>
添加子类
</el-button>
<el-button
type="text"
size="mini"
@click.stop="() => remove(node, data)"
>
删除
</el-button>
<el-button
type="text"
size="mini"
@click.stop="() => ddeditor(node, data)"
>
编辑
</el-button>
<el-button type="text" size="mini" @click.stop="() => remove(node, data)"> 删除 </el-button>
<el-button type="text" size="mini" @click.stop="() => ddeditor(node, data)"> 编辑 </el-button>
</span>
<el-button v-if="data.sign != 1" type="text">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</el-button>
<el-button v-if="data.sign != 1" type="text"
>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</el-button
>
</span>
</span>
</el-tree>


<div class="update-btn">
<el-button type="primary" size="mini" @click="getCheckedNode">获取选中节点</el-button>
<el-button type="primary" size="mini" @click="getCheckedNode"
>获取选中节点</el-button
>
</div>
<!-- 新增弹框 -->
<el-dialog title="新增" :visible.sync="dialogFormVisible" :center="true" width="400px">
<el-dialog
title="新增"
:visible.sync="dialogFormVisible"
:center="true"
width="400px"
>
<el-form :model="addForm">
<el-row :gutter="24">
<el-col :span="24">
<el-form-item label="一级大类名称:" v-if="level == 0" :label-width="formLabelWidth">
<el-input v-model="addForm.name" placeholder="一级大类名称" maxlength="8" autocomplete="off"></el-input>
<el-form-item
label="一级大类名称:"
v-if="level == 0"
:label-width="formLabelWidth"
>
<el-input
v-model="addForm.name"
placeholder="一级大类名称"
maxlength="8"
autocomplete="off"
></el-input>
</el-form-item>
<el-form-item label="二级小类名称:" v-if="level == 1" :label-width="formLabelWidth">
<el-input v-model="addForm.name" placeholder="二级小类名称" maxlength="8" autocomplete="off"></el-input>
<el-form-item
label="二级小类名称:"
v-if="level == 1"
:label-width="formLabelWidth"
>
<el-input
v-model="addForm.name"
placeholder="二级小类名称"
maxlength="8"
autocomplete="off"
></el-input>
</el-form-item>
<el-form-item label="三级小类名称:" v-if="level == 2" :label-width="formLabelWidth">
<el-input v-model="addForm.name" placeholder="三级小类名称" maxlength="8" autocomplete="off"></el-input>
<el-form-item
label="三级小类名称:"
v-if="level == 2"
:label-width="formLabelWidth"
>
<el-input
v-model="addForm.name"
placeholder="三级小类名称"
maxlength="8"
autocomplete="off"
></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer"
style="border-top:1px solid #eee;padding-top: 20px;display: flex;justify-content: end;">
<div
slot="footer"
class="dialog-footer"
style="
border-top: 1px solid #eee;
padding-top: 20px;
display: flex;
justify-content: end;
"
>
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" :loading="loadingFlag" @click="addSubmit">确 定</el-button>
<el-button type="primary" :loading="loadingFlag" @click="addSubmit"
>确 定</el-button
>
</div>
</el-dialog>




<!-- 删除确认弹框 -->
<el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :center="true">
<el-dialog
title="提示"
:visible.sync="dialogVisible"
width="30%"
:center="true"
>
<span>确定删除该条内容吗</span>
<span slot="footer" class="dialog-footer"
style="border-top:1px solid #eee;padding-top: 20px;display: flex;justify-content: end;">
<span
slot="footer"
class="dialog-footer"
style="
border-top: 1px solid #eee;
padding-top: 20px;
display: flex;
justify-content: end;
"
>
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="checkDelete">确 定</el-button>
</span>
</el-dialog>

</div>

<!-- 评分 -->
<div class="content-right">
<el-row>
<el-col :span="20">
(提示:拖拽大类可以排序)
<el-col :span="10">
<div style="display: flex; align-items: center">
<span style="width: 120px">话术名称</span>

<el-input
placeholder="请输入话术名称"
v-model="inparams.templateName"
maxlength="16"
show-word-limit
clearable
>
</el-input>
</div>
<div style="display: flex; align-items: center; height: 40px">
<span style="width: 120px">默认话术</span>

<el-radio-group v-model="inparams.defaultTemplate">
<el-radio :label="0">是</el-radio>
<el-radio :label="1">否</el-radio>
</el-radio-group>
</div>
</el-col>
<el-col :span="20"> (提示:拖拽大类可以排序) </el-col>
</el-row>

<draggable class="list-group" tag="ul" v-model="newlist" v-bind="dragOptions" @start="drag = true"
@end="drag = false" @change="onDragCallback">
<div style="border: 2px dashed #CCCCCC;margin-top: 30px;padding:6px;border-radius: 6px;font-size: 14px;"
v-for="(item, index) in newlist" :key="item.id">
<div style="display: flex;align-items: center;height: 40px;">
<div>{{ item.name || '' }}:</div>
<draggable
class="list-group"
tag="ul"
v-model="newlist"
v-bind="dragOptions"
@start="drag = true"
@end="drag = false"
@change="onDragCallback"
>
<div
style="
border: 2px dashed #cccccc;
margin-top: 30px;
padding: 6px;
border-radius: 6px;
font-size: 14px;
"
v-for="(item, index) in newlist"
:key="item.id"
>
<div style="display: flex; align-items: center; height: 40px">
<div>{{ item.name || "" }}:</div>
<div>
<el-input @input="inputYiji($event, index)" style="width: 100px;" v-model.number="item.fraction"
type="number" size="mini"></el-input>
<el-input
@input="inputYiji($event, index)"
style="width: 100px"
v-model.number="item.fraction"
type="number"
size="mini"
></el-input>
</div>
<div style="margin-left: 10px;">
<el-button type="danger" size="mini" @click="Deletecategories(item, index)">删除</el-button>
<div style="margin-left: 10px">
<el-button
type="danger"
size="mini"
@click="Deletecategories(item, index)"
>删除</el-button
>
</div>
</div>
<div class="erji" style="margin-left: 30px;" v-for="(asd, idx) in item.children" :key="idx">
<div style="display: flex;align-items: center;height: 40px;">
<div>{{ asd.name || '' }}:</div>
<div
class="erji"
style="margin-left: 30px"
v-for="(asd, idx) in item.children"
:key="idx"
>
<div style="display: flex; align-items: center; height: 40px">
<div>{{ asd.name || "" }}:</div>
<div>

<el-input @input="inputBlur($event, index, idx)" style="width: 100px;" v-model.number="asd.fraction"
type="number" size="mini"></el-input>

<el-input
@input="inputBlur($event, index, idx)"
style="width: 100px"
v-model.number="asd.fraction"
type="number"
size="mini"
></el-input>
</div>
<div style="margin-left: 10px;">
<el-button type="primary" size="mini" @click="Removethesecondary(index, idx, asd)">删除</el-button>
<div style="margin-left: 10px">
<el-button
type="primary"
size="mini"
@click="Removethesecondary(index, idx, asd)"
>删除</el-button
>
</div>
</div>
<div class="sanji" style="width:90%;">
<div style="display: flex;align-items: center;height: 40px;" v-for="(sanji, indx) in asd.children"
:key="indx">
<div style="width:85% ;margin-left: 30px;">{{ sanji.name || '' }}</div>
<div style="margin-left: 10px;">
<el-button type="info" size="mini" @click="Deletethelevel(index, idx, indx, sanji)">删除</el-button>
<div class="sanji" style="width: 90%">
<div
style="display: flex; align-items: center; height: 40px"
v-for="(sanji, indx) in asd.children"
:key="indx"
>
<div style="width: 85%; margin-left: 30px">
{{ sanji.name || "" }}
</div>
<div style="margin-left: 10px">
<el-button
type="info"
size="mini"
@click="Deletethelevel(index, idx, indx, sanji)"
>删除</el-button
>
</div>
</div>
</div>
@@ -131,36 +308,59 @@
</div>
</draggable>

<div style="display: flex;align-items: center;margin-top:30px;">
<div style="display: flex; align-items: center; margin-top: 30px">
<el-button type="primary" size="mini" @click="cancel">取消</el-button>
<el-button style="margin-left: 30px;" type="primary" size="mini" @click="submitForm">保存</el-button>
<el-button
style="margin-left: 30px"
type="primary"
size="mini"
@click="submitForm"
>保存</el-button
>
</div>

</div>


<!--?编辑弹框?-->
<el-dialog title="编辑" :visible.sync="isshowage" :center="true" width="30%">
<div style="display: flex;align-items: center;height: 40px;width: 100%;">
<el-dialog
title="编辑"
:visible.sync="isshowage"
:center="true"
width="30%"
>
<div
style="display: flex; align-items: center; height: 40px; width: 100%"
>
<div>类名:</div>
<div style="width:88%">
<el-input type="text" maxlength="8" v-model="frosasd.name" autocomplete="off"></el-input>
<div style="width: 88%">
<el-input
type="text"
maxlength="8"
v-model="frosasd.name"
autocomplete="off"
></el-input>
</div>
</div>

<div slot="footer" class="dialog-footer"
style="border-top:1px solid #eee;padding-top: 20px;display: flex;justify-content: end;">
<div
slot="footer"
class="dialog-footer"
style="
border-top: 1px solid #eee;
padding-top: 20px;
display: flex;
justify-content: end;
"
>
<el-button @click="submicll()">取 消</el-button>
<el-button type="primary" @click="submiadd()">提交</el-button>
</div>
</el-dialog>

</div>
</div>
</template>

<script>
import draggable from 'vuedraggable'
import draggable from "vuedraggable";
export default {
data() {
return {
@@ -170,7 +370,7 @@ export default {
treeList: [], //树形数据
newlist: [],
nodelist: [],
orgType: localStorage.getItem('orgType'),
orgType: localStorage.getItem("orgType"),
dialogFormVisible: false, // 弹框
dialogVisible: false,
isshowage: false,
@@ -195,8 +395,13 @@ export default {
addid: null, // 新增的节点id(接口生成)
deleteId: null, // 要删除的表单节点的ID
disabledcet: false,
Templateid: '',
Templateid: "",
loadingFlag: false,

inparams: {
templateName: "", // 话术名称
defaultTemplate: 1, // 默认模板 0:是,1:否
},
};
},
components: {
@@ -211,7 +416,7 @@ export default {
mounted() {
var isnull = this.$route.query.flag;
this.Templateid = isnull.id;
this.setInitCheck()
this.setInitCheck();
},
computed: {
dragOptions() {
@@ -231,31 +436,33 @@ export default {
},
// 获取项目下拉的数据
getHouse() {
this.$api.api.findHouseByUser({
orgType: localStorage.getItem("orgType"),
}).then((res) => {
this.houseList = res.data.map((item) => {
return {
value: item.id,
label: item.propertyName,
};
});
if (this.houseId == "") {
if (localStorage.getItem('orgType') == 3) {
this.houseId = localStorage.getItem('houseId')
} else {
this.houseId = this.houseList[0].value;
this.$api.api
.findHouseByUser({
orgType: localStorage.getItem("orgType"),
})
.then((res) => {
this.houseList = res.data.map((item) => {
return {
value: item.id,
label: item.propertyName,
};
});
if (this.houseId == "") {
if (localStorage.getItem("orgType") == 3) {
this.houseId = localStorage.getItem("houseId");
} else {
this.houseId = this.houseList[0].value;
}
// this.houseId = this.houseList[0].value;
}
// this.houseId = this.houseList[0].value;
}
this.templategetMarketingTree()
})
this.templategetMarketingTree();
});
},
//获取模板
templategetMarketingTree() {
let parmest = {
houseId: this.houseId,
}
};
this.$api.api.templategetMarketingTree(parmest).then((res) => {
console.log(res);
let data = res.data;
@@ -263,7 +470,7 @@ export default {
data = JSON.parse(data);
this.treeList = data;
this.getAllTreeListId(this.treeList);
})
});
},
// 递归获取所有的ID
getAllTreeListId(arr) {
@@ -279,8 +486,10 @@ export default {
},
// ------获取选中的节点
getCheckedNode() {
let res = this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys());
console.log(res)
let res = this.$refs.tree
.getCheckedKeys()
.concat(this.$refs.tree.getHalfCheckedKeys());
console.log(res);
let arr = [];
let arr1 = JSON.parse(JSON.stringify(this.treeList));

@@ -297,18 +506,20 @@ export default {
},
// 树图,设置初始选中值及分数回显--编辑跳转过来的
setInitCheck() {
if (this.Templateid == '') {
if (this.Templateid == "") {
//获取项目
this.getHouse();
} else {
this.disabledcet = true;
let parmest = {
tempId: this.Templateid,
}
};
this.$api.http.templatedelfindByTempId(parmest).then((res) => {
this.houseId = res.data.houseId;
this.checklist = res.data.list;
this.nodelist = res.data.list;
this.inparams.templateName = res.data.templateName;
this.inparams.defaultTemplate = res.data.defaultTemplate;
this.getHouse2();
this.checklist.forEach((item) => {
this.rateMap.set(item.id, item.fraction); // map维护分数
@@ -317,30 +528,28 @@ export default {
this.defaultCheck.push(item.id);
}
});
console.log(this.newlist, "99999999999999999999999999")
console.log(this.newlist, "99999999999999999999999999");
this.listCheckedchaifen();

})
});
}

},
// 获取项目下拉的数据
getHouse2() {
this.$api.api.findHouseByUser({
orgType: localStorage.getItem("orgType"),
}).then((res) => {
this.houseList = res.data.map((item) => {
return {
value: item.id,
label: item.propertyName,
};
this.$api.api
.findHouseByUser({
orgType: localStorage.getItem("orgType"),
})
.then((res) => {
this.houseList = res.data.map((item) => {
return {
value: item.id,
label: item.propertyName,
};
});
this.templategetMarketingTree();
});
this.templategetMarketingTree()
})
},



inputYiji(e, index) {
if (e < 0) {
this.$message({
@@ -697,6 +906,7 @@ export default {
let params = {
houseId: this.houseId,
children: [],
...this.inparams,
};

list.forEach((item) => {
@@ -739,7 +949,7 @@ export default {
},
// 评分保存 新增模板
saveRate(params) {
if (this.Templateid != '') {
if (this.Templateid != "") {
params.tempId = this.Templateid;
}
this.$api.http.templategeaddTemplate(params).then((res) => {
@@ -748,10 +958,9 @@ export default {
type: "success",
});
window.history.back();
})
});
},


//拖拽排序
Peerdrag(before) {
let arr = [];
@@ -797,9 +1006,7 @@ export default {
},
//排序提交
dragSort(list) {
this.$api.http.templategeupdateSort({ children: list }).then((res) => {

})
this.$api.http.templategeupdateSort({ children: list }).then((res) => {});
},
//控制那个可拖拽节点
allowDrag(draggingNode, dropNode, type) {
@@ -847,10 +1054,10 @@ export default {
// 点击添加节点确认按钮
addSubmit() {
if (this.addForm.name != "") {
this.loadingFlag = true
this.loadingFlag = true;
setTimeout(() => {
this.loadingFlag = false
console.log('防重')
this.loadingFlag = false;
console.log("防重");
}, 1);
this.dialogFormVisible = false;
this.addNode();
@@ -864,65 +1071,67 @@ export default {
},
// 新增的节点保存
addNode() {
this.$api.http.templategeadd({
pid: this.pid,
name: this.addForm.name,
houseId: this.houseId,
sign: 1
}).then((res) => {
if (this.level == 0) {
// 大类
let newNode = {
id: res.data,
sign: 1,
pid: 0,
sort: this.treeList.length + 1,
label: this.addForm.name,
fraction: "",
children: [],
houseId: this.houseId,
};
this.treeList.push(newNode);
this.allTreeListId.push(res.data.obj);
} else if (this.level == 1) {
// 二级
let newChild = {
id: res.data,
pid: this.pid,
sign: 1,
fraction: "",
sort: null,
label: this.addForm.name,
children: [],
houseId: this.houseId,
};
this.$api.http
.templategeadd({
pid: this.pid,
name: this.addForm.name,
houseId: this.houseId,
sign: 1,
})
.then((res) => {
if (this.level == 0) {
// 大类
let newNode = {
id: res.data,
sign: 1,
pid: 0,
sort: this.treeList.length + 1,
label: this.addForm.name,
fraction: "",
children: [],
houseId: this.houseId,
};
this.treeList.push(newNode);
this.allTreeListId.push(res.data.obj);
} else if (this.level == 1) {
// 二级
let newChild = {
id: res.data,
pid: this.pid,
sign: 1,
fraction: "",
sort: null,
label: this.addForm.name,
children: [],
houseId: this.houseId,
};

this.treeList.forEach((item, index) => {
if (item.id == this.pid) {
item.children.push(newChild);
}
});
this.allTreeListId.push(res.data.obj);
} else {
let newChilds = {
id: res.data,
sign: 1,
fraction: "",
pid: this.pid,
sort: null,
label: this.addForm.name,
houseId: this.houseId,
};
this.treeList.forEach((item, index) => {
item.children.forEach((ite, inde) => {
if (ite.id == this.pid) {
ite.children.push(newChilds);
this.treeList.forEach((item, index) => {
if (item.id == this.pid) {
item.children.push(newChild);
}
});
});
this.allTreeListId.push(res.data.obj);
}
})
this.allTreeListId.push(res.data.obj);
} else {
let newChilds = {
id: res.data,
sign: 1,
fraction: "",
pid: this.pid,
sort: null,
label: this.addForm.name,
houseId: this.houseId,
};
this.treeList.forEach((item, index) => {
item.children.forEach((ite, inde) => {
if (ite.id == this.pid) {
ite.children.push(newChilds);
}
});
});
this.allTreeListId.push(res.data.obj);
}
});
},
//编辑提交
submiadd() {
@@ -930,7 +1139,7 @@ export default {
let parmest = {
name: that.frosasd.name,
id: that.frosasd.id,
}
};
this.$api.http.templategeupdate(parmest).then((res) => {
that.treeList.forEach((item, index) => {
if (item.id == that.frosasd.id) {
@@ -970,7 +1179,7 @@ export default {
});
}
});
})
});
},
//编辑
ddeditor(node, data) {
@@ -982,7 +1191,7 @@ export default {
checkDelete() {
let parmest = {
id: this.deleteId,
}
};
this.$api.http.templategedel(parmest).then((res) => {
this.treeList.forEach((item, index) => {
if (item.id == this.deleteId) {
@@ -994,10 +1203,7 @@ export default {
} else {
ite.children.forEach((it, ine) => {
if (it.id == this.deleteId) {
this.treeList[index].children[inde].children.splice(
ine,
1
);
this.treeList[index].children[inde].children.splice(ine, 1);
}
});
}
@@ -1006,7 +1212,7 @@ export default {
});

this.dialogVisible = false;
})
});
},
remove(node, data) {
if (node.level == 3) {
@@ -1017,7 +1223,8 @@ export default {
if (data.children.length == 0) {
this.deleteType = "node";
this.deleteId = data.id;
this.dialogVisible = true; findByTempId
this.dialogVisible = true;
findByTempId;
} else {
this.$message({
message: "请先清空子级",
@@ -1100,11 +1307,11 @@ export default {
font-weight: bold;
}
}
/deep/ .el-button--primary{
background: #2671E2 !important;
border: 1px solid #2671E2 !important;
/deep/ .el-button--primary {
background: #2671e2 !important;
border: 1px solid #2671e2 !important;
}
/deep/ .el-button--text{
color: #2671E2;
/deep/ .el-button--text {
color: #2671e2;
}
</style>

Загрузка…
Отмена
Сохранить