2 Commits

1 changed files with 375 additions and 0 deletions
Split View
  1. +375
    -0
      src/views/Customer/source.vue

+ 375
- 0
src/views/Customer/source.vue View File

@@ -0,0 +1,375 @@
<template>
<div class="box-center">
<!-- 头 -->
<div class="app-top">
<div style="margin-left: 20px; display: flex">
<el-button v-if="cus_sou_add" @click="editorinfo()" type="primary"
>新增</el-button
>
<div
style="margin-left: auto; margin-right: 10px"
v-if="cus_sou_downLoad"
>
<el-button @click="downLoad">导出</el-button>
</div>
</div>
</div>

<!-- 表格 -->
<div class="cen-tab">
<el-table :data="tableData" stripe style="width: 100%" row-key="id">
<el-table-column prop="words" label="序号" align="center">
</el-table-column>
<el-table-column prop="houseName" label="来源" align="center">
</el-table-column>
<el-table-column prop="createDate" label="关联客户" align="center">
</el-table-column>
<!-- scope -->
<el-table-column label="操作" align="center">
<template slot-scope="scope" style="">
<el-button
v-if="cus_sou_edit"
type="text"
@click="bianji(scope.row)"
>编辑</el-button
>
<el-button v-if="cus_sou_del" type="text" @click="del(scope.row)"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
<div style="display: flex; justify-content: flex-end; margin-top: 10px">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="Page"
:page-sizes="[10, 30, 50]"
:page-size="size"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
>
</el-pagination>
</div>
</div>

<el-dialog
:title="editFlag ? '编辑' : '新增'"
:visible.sync="dialogVisible"
@close="$refs.ruleForm.resetFields()"
>
<el-form
:model="ruleForm"
label-position="labelPosition"
:rules="ruleser"
ref="ruleForm"
label-width="140px"
style="width: 60%; margin: 0 auto"
>
<el-form-item label="客户来源" prop="source">
<el-input
v-model="ruleForm.source"
maxlength="8"
clearable
></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" :loading="loadingFlag" @click="editor()"
>保存</el-button
>
</div>
</el-dialog>
<el-dialog
title="删除来源"
:visible.sync="delVisible"
@close="$refs.ruleForm.resetFields()"
>
<div style="text-align:center;margin-bottom:20px;">请将此来源的客户转移到以下来源</div>
<el-form
:model="ruleForm"
label-position="labelPosition"
:rules="ruleser"
ref="ruleForm"
label-width="140px"
style="width: 60%; margin: 0 auto"
>
<el-form-item label="客户移至" prop="source">
<el-input
v-model="ruleForm.source"
maxlength="8"
clearable
></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="delVisible = false">取 消</el-button>
<el-button type="primary" :loading="loadingFlag" @click="editor()"
>保存</el-button
>
</div>
</el-dialog>
</div>
</template>

<script>
import { mapGetters } from "vuex";
import { exportMethodPost } from "@/util/util";
import Sortable from "sortablejs";
export default {
data() {
return {
currentPage4: 1,
value: "",
input: "",
tableData: [
{
id: "0",
houseName: "123",
},
{
id: "1",
houseName: "456",
},
{
id: "2",
houseName: "789",
},
],
multipleSelection: [],
dialogVisible: false,
loadingFlag: false,
delVisible: false,
orgType: localStorage.getItem("orgType"),
ruleForm: {
editFlag: "",
id: "",
},
houseId: "",
houseList: [],
Page: 1,
size: 10,
words: "",
total: 0,
ruleser: {
source: [
{ required: true, message: "请填写用户来源", trigger: "blur" },
],
},
editFlag: false,
};
},
computed: {
...mapGetters(["permissions"]),
},
created() {
this.cus_sou_add = this.permissions["cus_sou_add"];
this.cus_sou_downLoad = this.permissions["cus_sou_downLoad"];
this.cus_sou_del = this.permissions["cus_sou_del"];
this.cus_sou_edit = this.permissions["cus_sou_edit"];
},
mounted() {
this.rowDrop();
return;

this.zkhousePage();
},
methods: {
//行拖拽
rowDrop() {
const tbody = document.querySelector(".el-table__body-wrapper tbody");
const _this = this;
Sortable.create(tbody, {
onEnd({ newIndex, oldIndex }) {
console.log(newIndex, oldIndex, "序号");
const currRow = _this.tableData.splice(oldIndex, 1)[0];
console.log(currRow);
_this.tableData.splice(newIndex, 0, currRow);
},
});
},
downLoad() {
let obj = {
houseId: this.houseId,
words: this.words,
};
// exportMethodPost()
exportMethodPost("autoSR/sensitivewords/export", "禁忌话术", obj);
},
houseChange() {
this.Page = 1;
this.words = "";
this.taboofindbypagelist();
},
zkhousePage() {
this.$api.api
.findHouseByUser({
orgType: localStorage.getItem("orgType"),
})
.then((res) => {
this.houseList = res.data;
if (localStorage.getItem("orgType") == 3) {
this.houseId = localStorage.getItem("houseId");
} else {
this.houseId = res.data[0].id;
}
// this.houseId = res.data[0].id;
this.taboofindbypagelist();
});
},
taboofindbypagelist() {
let obj = {
current: this.Page,
size: this.size,
houseId: this.houseId,
words: this.words,
};
this.$api.http.taboofindbypage(obj).then((res) => {
console.log(res);
this.tableData = res.data.records;
this.total = res.data.total;
});
},
screening() {
this.Page = 1;
this.taboofindbypagelist();
},
//删除
del(item) {
this.delVisible = true;
},
//编辑
bianji(row) {
this.ruleForm.id = row.id;
this.dialogVisible = true;
this.ruleForm.words = row.words;
this.editFlag = true;
},

editorinfo() {
this.dialogVisible = true;
this.editFlag = false;
this.ruleForm.editFlag = "";
},
editor() {
this.$refs.ruleForm.validate((valid) => {
if (valid) {
this.loadingFlag = true;
if (this.editFlag == false) {
this.$api.http
.tabooadd({
houseId: this.houseId,
words: this.ruleForm.words,
})
.then((res) => {
if (res.code == 0) {
setTimeout(() => {
this.loadingFlag = false;
console.log("防重");
}, 1);
this.dialogVisible = false;
this.$refs.ruleForm.resetFields();
this.Page = 1;
this.words = "";
this.taboofindbypagelist();
} else {
this.$message.error(res.message);
}
});
} else {
this.$api.http
.tabooupdate({
id: this.ruleForm.id,
words: this.ruleForm.words,
})
.then((res) => {
if (res.code == 0) {
setTimeout(() => {
this.loadingFlag = false;
console.log("防重");
}, 1);
this.dialogVisible = false;
this.$refs.ruleForm.resetFields();
this.Page = 1;
this.words = "";
this.taboofindbypagelist();
} else {
this.$message.error(res.message);
}
});
}
} else {
return false;
}
});
},
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
this.size = val;
this.taboofindbypagelist();
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
this.Page = val;
this.taboofindbypagelist();
},
},
};
</script>

<style scoped="scoped" lang="scss" >
.box-center {
width: 100%;
padding: 15px;
min-width: 1000px;
padding-bottom: 100px;
}
.cen-tab {
width: 100%;
padding: 15px;
background: #ffffff;
margin-top: 15px;
}
.tophove {
color: #ffffff;
background: #2671e2;
}
.app-top {
width: 100%;
background: #ffffff;
box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04);
border-radius: 4px;
padding-top: 15px;
padding-bottom: 15px;

.app-titel {
width: 100%;
display: flex;
align-items: center;
.label {
font-size: 14px;
font-weight: 400;
color: #32363d;
line-height: 14px;
margin-left: 15px;
}
.toptimeqhuan {
height: 30px;
background: #ffffff;
display: flex;
align-items: center;
}
.toptimeqhuan div {
padding-left: 20px;
padding-right: 20px;
text-align: center;
line-height: 30px;
font-size: 14px;
margin-right: 15px;
border-radius: 4px;
border: 1px solid #e0e0e0;
}
}
}
</style>

Loading…
Cancel
Save