<template>
|
<div class="customer-edit">
|
<EditForm
|
:inline="false"
|
:list="formList"
|
:title="title"
|
@updateValue="updateValue"
|
ref="form"
|
:formValues="formValues"
|
:formRules="formRules"
|
:topInfo="topInfo"
|
>
|
<template v-slot:top v-if="!serialNo">
|
<div class="disable-input" @click="isShowList = true">
|
<p>{{checkedUser.userid || ''}}</p>
|
<i class="el-icon-tickets"></i>
|
</div>
|
</template>
|
|
<template v-slot:default>
|
<div class="form-buttons">
|
<el-button @click="cancel">取消</el-button>
|
<el-button @click="submit" type="primary">保存</el-button>
|
</div>
|
</template>
|
</EditForm>
|
|
<el-dialog :visible.sync="isShowList" custom-class="comm-dialog" :modal-append-to-body="false">
|
<EditForm
|
:inline="true"
|
:list="userListForm"
|
@updateValue="updateUserValue"
|
ref="userForm"
|
:formValues="userFormValues"
|
>
|
<template v-slot:default>
|
<div class="form-buttons">
|
<el-button @click="resetUser">重置</el-button>
|
<el-button @click="qryUserList" type="primary">搜索</el-button>
|
</div>
|
</template>
|
</EditForm>
|
<TableList
|
:pageInfo="pageInfo"
|
:total="total"
|
title="用户列表"
|
@doAction="doAction"
|
@handleCurrentChange="handleCurrentChange"
|
@handleSizeChange="handleSizeChange"
|
:isAutoIndex="true"
|
:list="records"
|
:header="customerUserHeader"
|
></TableList>
|
</el-dialog>
|
</div>
|
</template>
|
<script>
|
// import // qryCssDetailInfo,
|
// // saveOrUpdateCss,
|
// // qryUserList
|
// '@comprehensive/serve/public'
|
// import { customerInfo } from '@comprehensive/utils/editFormItems'
|
// import { customerUserHeader } from '@comprehensive/utils/tableHeaders'
|
import EditForm from './components/EditForm'
|
import TableList from './components/TableList'
|
|
import qryCssDetailInfo from '@comprehensive/model/qryCssDetailInfo'
|
import qryUserList from '@comprehensive/model/qryUserList'
|
import saveOrUpdateCss from '@comprehensive/model/saveOrUpdateCss'
|
|
export default {
|
components: {
|
EditForm,
|
TableList
|
},
|
data() {
|
return {
|
title: '客服管理',
|
loading: false,
|
isShowList: false,
|
model: null,
|
userModel: null,
|
topInfo: {
|
label: '客服工号'
|
},
|
info: {},
|
pageInfo: {
|
currentPage: 1,
|
pageSize: 10
|
},
|
total: 0,
|
records: [],
|
formRules: {},
|
customerUserHeader: [],
|
checkedUser: {},
|
serialNo: '',
|
formList: [],
|
userListForm: [],
|
addFilter: ['csId', 'belongOrgName']
|
}
|
},
|
created() {
|
this.init()
|
},
|
methods: {
|
init() {
|
const { addFilter, $route } = this
|
const { serialNo } = $route.query
|
const model = saveOrUpdateCss()
|
this.model = model
|
if (serialNo) {
|
// 编辑
|
this.serialNo = serialNo
|
this.qryCssDetailInfo()
|
} else {
|
// 新增
|
const userModel = qryUserList()
|
const formList = model.getFormList()
|
this.formList = formList.filter(({ name }) => !addFilter.includes(name))
|
|
this.userListForm = userModel.getFormList()
|
this.customerUserHeader = userModel.getTableList()
|
this.userModel = userModel
|
this.qryUserList()
|
}
|
this.formRules = model.getFormRules()
|
},
|
|
// 获取详情信息
|
async qryCssDetailInfo() {
|
this.loading = true
|
let { serialNo, model } = this
|
const res = await qryCssDetailInfo().request({ serialNo })
|
this.formList = model.getFormList(res)
|
this.loading = false
|
},
|
|
// 客服选择列表
|
async qryUserList() {
|
let { pageInfo, userFormValues, userModel } = this
|
const res = await userModel.request({ ...pageInfo, ...userFormValues })
|
const { list = [], total } = res
|
this.records = list
|
this.total = total
|
},
|
|
async saveOrUpdateCss(info) {
|
this.loading = true
|
const { serialNo } = this
|
if (serialNo) {
|
info = { ...info, serialNo }
|
}
|
await this.model.request({
|
...info
|
})
|
this.loading = false
|
this.$message({
|
type: 'success',
|
message: '提交成功!'
|
})
|
this.$router.push({
|
path: '/comprehensiveTransaction/customerService'
|
})
|
},
|
|
// 更新表单数据
|
updateValue(index, info) {
|
const { formList } = this
|
if (isNaN(index)) {
|
// index is name
|
index = formList.findIndex(({ name }) => name === index)
|
}
|
if (!isNaN(index) && index > -1) {
|
const preInfo = formList[index]
|
this.$set(formList, index, { ...preInfo, ...info })
|
// if (preInfo.name === 'productid') {
|
// this.qryDimensionList()
|
// }
|
}
|
},
|
|
updateUserValue(index, info) {
|
const { userListForm } = this
|
if (isNaN(index)) {
|
// index is name
|
index = userListForm.findIndex(({ name }) => name === index)
|
}
|
if (!isNaN(index) && index > -1) {
|
const preInfo = userListForm[index]
|
this.$set(userListForm, index, { ...preInfo, ...info })
|
}
|
},
|
|
// 修改翻页条数
|
handleSizeChange(val) {
|
this.pageInfo.pageSize = val
|
this.qryUserList()
|
},
|
|
// 修改翻页数
|
handleCurrentChange(val) {
|
this.pageInfo.currentPage = val
|
this.qryUserList()
|
},
|
|
// 表单事件回调
|
doAction(name, item, index) {
|
this.checkedUser = item
|
this.updateValue('csName', {
|
value: item.username
|
})
|
this.isShowList = false
|
},
|
|
cancel() {
|
this.$router.go(-1)
|
},
|
|
resetUser() {
|
const { userModel } = this
|
this.userListForm = userModel.getFormList()
|
},
|
|
submit() {
|
const { serialNo, checkedUser, formValues } = this
|
const { userid } = checkedUser
|
if (!serialNo && !userid) {
|
this.$message('请先选择客服！')
|
return false
|
}
|
let info = this.$refs.form.validate()
|
if (info !== false) {
|
this.saveOrUpdateCss(
|
!serialNo ? { csId: userid, ...formValues } : formValues
|
)
|
}
|
}
|
},
|
computed: {
|
// 表单值信息
|
formValues() {
|
const { model, formList } = this
|
return model.getFormValues(formList)
|
},
|
userFormValues() {
|
const { userModel, userListForm } = this
|
if (userModel) {
|
return userModel.getFormValues(userListForm)
|
}
|
return {}
|
}
|
},
|
watch: {
|
$route() {
|
this.init()
|
}
|
}
|
}
|
</script>
|
<style lang="postcss" scoped>
|
.disable-input {
|
background-color: #f5f7fa;
|
border: 1px solid #f5f7fa;
|
border-radius: 4px;
|
color: #c0c4cc;
|
cursor: pointer;
|
width: 190px;
|
height: 32px;
|
line-height: 32px;
|
padding: 0 15px;
|
display: flex;
|
justify-content: space-between;
|
& p {
|
flex: 1;
|
}
|
& >>> .el-icon-tickets {
|
line-height: 34px;
|
}
|
}
|
.customer-edit {
|
& >>> .el-dialog__header {
|
padding-bottom: 0;
|
}
|
& >>> .el-dialog__body {
|
padding-top: 0;
|
}
|
& >>> .el-dialog {
|
width: 950px;
|
}
|
}
|
</style>
|
