dai
3 years ago
3 changed files with 491 additions and 0 deletions
@ -0,0 +1,179 @@ |
|||||
|
import Cookies from 'js-cookie' |
||||
|
import qs from 'qs' |
||||
|
export default { |
||||
|
data() { |
||||
|
/* eslint-disable */ |
||||
|
return { |
||||
|
// 设置属性
|
||||
|
mixinViewModuleOptions: { |
||||
|
createdIsNeed: true, // 此页面是否在创建时，调用查询数据列表接口？
|
||||
|
activatedIsNeed: false, // 此页面是否在激活（进入）时，调用查询数据列表接口？
|
||||
|
getDataListURL: '', // 数据列表接口，API地址
|
||||
|
getDataListIsPage: false, // 数据列表接口，是否需要分页？
|
||||
|
deleteURL: '', // 删除接口，API地址
|
||||
|
deleteIsBatch: false, // 删除接口，是否需要批量？
|
||||
|
deleteIsBatchKey: 'id', // 删除接口，批量状态下由那个key进行标记操作？比如：pid，uid...
|
||||
|
exportURL: '' // 导出接口，API地址
|
||||
|
}, |
||||
|
// 默认属性
|
||||
|
dataForm: {}, // 查询条件
|
||||
|
dataList: [], // 数据列表
|
||||
|
order: '', // 排序，asc／desc
|
||||
|
orderField: '', // 排序，字段
|
||||
|
page: 1, // 当前页码
|
||||
|
limit: 10, // 每页数
|
||||
|
total: 0, // 总条数
|
||||
|
dataListLoading: false, // 数据列表，loading状态
|
||||
|
dataListSelections: [], // 数据列表，多选项
|
||||
|
addOrUpdateVisible: false // 新增／更新，弹窗visible状态
|
||||
|
} |
||||
|
/* eslint-enable */ |
||||
|
}, |
||||
|
created() { |
||||
|
if (this.mixinViewModuleOptions.createdIsNeed) { |
||||
|
this.query() |
||||
|
} |
||||
|
}, |
||||
|
activated() { |
||||
|
if (this.mixinViewModuleOptions.activatedIsNeed) { |
||||
|
this.query() |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
// 获取数据列表
|
||||
|
query() { |
||||
|
this.dataListLoading = true |
||||
|
this.$http |
||||
|
.post(this.mixinViewModuleOptions.getDataListURL, { |
||||
|
order: this.order, |
||||
|
orderField: this.orderField, |
||||
|
page: this.mixinViewModuleOptions.getDataListIsPage |
||||
|
? this.page |
||||
|
: null, |
||||
|
limit: this.mixinViewModuleOptions.getDataListIsPage |
||||
|
? this.limit |
||||
|
: null, |
||||
|
...this.dataForm |
||||
|
}) |
||||
|
.then(({ data: res }) => { |
||||
|
this.dataListLoading = false |
||||
|
if (res.code !== 0) { |
||||
|
this.dataList = [] |
||||
|
this.total = 0 |
||||
|
return this.$message.error(res.msg) |
||||
|
} |
||||
|
this.dataList = this.mixinViewModuleOptions.getDataListIsPage |
||||
|
? res.data.list |
||||
|
: res.data |
||||
|
this.total = this.mixinViewModuleOptions.getDataListIsPage |
||||
|
? res.data.total |
||||
|
: 0 |
||||
|
}) |
||||
|
.catch(() => { |
||||
|
this.dataListLoading = false |
||||
|
}) |
||||
|
}, |
||||
|
// 多选
|
||||
|
dataListSelectionChangeHandle(val) { |
||||
|
this.dataListSelections = val |
||||
|
}, |
||||
|
// 排序
|
||||
|
dataListSortChangeHandle(data) { |
||||
|
if (!data.order || !data.prop) { |
||||
|
this.order = '' |
||||
|
this.orderField = '' |
||||
|
return false |
||||
|
} |
||||
|
this.order = data.order.replace(/ending$/, '') |
||||
|
this.orderField = data.prop.replace(/([A-Z])/g, '_$1').toLowerCase() |
||||
|
this.query() |
||||
|
}, |
||||
|
// 分页, 每页条数
|
||||
|
pageSizeChangeHandle(val) { |
||||
|
this.page = 1 |
||||
|
this.limit = val |
||||
|
this.query() |
||||
|
}, |
||||
|
// 分页, 当前页
|
||||
|
pageCurrentChangeHandle(val) { |
||||
|
this.page = val |
||||
|
this.query() |
||||
|
}, |
||||
|
getDataList: function () { |
||||
|
this.page = 1 |
||||
|
this.query() |
||||
|
}, |
||||
|
// 新增 / 修改
|
||||
|
addOrUpdateHandle(id) { |
||||
|
this.addOrUpdateVisible = true |
||||
|
this.$nextTick(() => { |
||||
|
this.$refs.addOrUpdate.dataForm.id = id |
||||
|
this.$refs.addOrUpdate.init() |
||||
|
}) |
||||
|
}, |
||||
|
// 删除
|
||||
|
deleteHandle(id) { |
||||
|
if ( |
||||
|
this.mixinViewModuleOptions.deleteIsBatch && |
||||
|
!id && |
||||
|
this.dataListSelections.length <= 0 |
||||
|
) { |
||||
|
return this.$message({ |
||||
|
message: this.$t('prompt.deleteBatch'), |
||||
|
type: 'warning', |
||||
|
duration: 500 |
||||
|
}) |
||||
|
} |
||||
|
this.$confirm( |
||||
|
this.$t('prompt.info', { handle: this.$t('delete') }), |
||||
|
this.$t('prompt.title'), |
||||
|
{ |
||||
|
confirmButtonText: this.$t('confirm'), |
||||
|
cancelButtonText: this.$t('cancel'), |
||||
|
type: 'warning' |
||||
|
} |
||||
|
) |
||||
|
.then(() => { |
||||
|
this.$http |
||||
|
.delete( |
||||
|
`${this.mixinViewModuleOptions.deleteURL}${ |
||||
|
this.mixinViewModuleOptions.deleteIsBatch ? '' : '/' + id |
||||
|
}`,
|
||||
|
this.mixinViewModuleOptions.deleteIsBatch |
||||
|
? { |
||||
|
data: id |
||||
|
? [id] |
||||
|
: this.dataListSelections.map( |
||||
|
(item) => |
||||
|
item[this.mixinViewModuleOptions.deleteIsBatchKey] |
||||
|
) |
||||
|
} |
||||
|
: {} |
||||
|
) |
||||
|
.then(({ data: res }) => { |
||||
|
if (res.code !== 0) { |
||||
|
return this.$message.error(res.msg) |
||||
|
} |
||||
|
this.$message({ |
||||
|
message: this.$t('prompt.success'), |
||||
|
type: 'success', |
||||
|
duration: 500, |
||||
|
onClose: () => { |
||||
|
this.query() |
||||
|
} |
||||
|
}) |
||||
|
}) |
||||
|
.catch(() => {}) |
||||
|
}) |
||||
|
.catch(() => {}) |
||||
|
}, |
||||
|
// 导出
|
||||
|
exportHandle() { |
||||
|
var params = qs.stringify({ |
||||
|
token: Cookies.get('token'), |
||||
|
...this.dataForm |
||||
|
}) |
||||
|
window.location.href = `${window.SITE_CONFIG['apiURL']}${this.mixinViewModuleOptions.exportURL}?${params}` |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,239 @@ |
|||||
|
<template> |
||||
|
<el-dialog |
||||
|
:visible.sync="visible" |
||||
|
:title="'选择客户'" |
||||
|
:close-on-click-modal="false" |
||||
|
:close-on-press-escape="false" |
||||
|
width="700px" |
||||
|
:top="diaTop" |
||||
|
> |
||||
|
<div class="customerDiv" :style="{ height: diaHeight + 'px' }"> |
||||
|
<el-checkbox |
||||
|
:indeterminate="isIndeterminate" |
||||
|
v-model="checkAll" |
||||
|
@change="handleCheckAllChange" |
||||
|
>全选</el-checkbox |
||||
|
> |
||||
|
|
||||
|
<div |
||||
|
class="customerItem" |
||||
|
:key="item.customerId" |
||||
|
v-for="(item, index) in customerList" |
||||
|
> |
||||
|
<el-checkbox |
||||
|
:key="index" |
||||
|
class="customerItem" |
||||
|
v-model="item.selected" |
||||
|
:label="item.customerId" |
||||
|
>{{ item.customerName }}</el-checkbox |
||||
|
> |
||||
|
|
||||
|
<el-select |
||||
|
v-show="item.selected" |
||||
|
v-model="item.categoryKeyArr" |
||||
|
size="small" |
||||
|
multiple |
||||
|
collapse-tags |
||||
|
placeholder="请选择功能类别" |
||||
|
> |
||||
|
<el-option |
||||
|
v-for="item in categoryOptions" |
||||
|
:key="item.value" |
||||
|
:label="item.label" |
||||
|
:value="item.value" |
||||
|
> |
||||
|
</el-option> |
||||
|
</el-select> |
||||
|
|
||||
|
<el-button |
||||
|
class="item-btn" |
||||
|
v-if="item.selected" |
||||
|
style="margin-left: 20px" |
||||
|
type="text" |
||||
|
size="small" |
||||
|
@click="copyToAll(item)" |
||||
|
>应用到所有客户</el-button |
||||
|
> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<template slot="footer"> |
||||
|
<el-button @click="visible = false">{{ $t('cancel') }}</el-button> |
||||
|
<el-button type="primary" @click="save()">{{ $t('confirm') }}</el-button> |
||||
|
</template> |
||||
|
</el-dialog> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { Loading } from 'element-ui' // 引入Loading服务 |
||||
|
import { requestPost, requestGet } from '@/js/dai/request' |
||||
|
import { mapGetters } from 'vuex' |
||||
|
|
||||
|
let loading // 加载动画 |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
visible: false, |
||||
|
|
||||
|
elseParams: {}, //选中的表单id，从父组件传过来 |
||||
|
|
||||
|
categoryOptions: [], |
||||
|
|
||||
|
customerList: [], //客户列表 |
||||
|
|
||||
|
isIndeterminate: true, |
||||
|
checkAll: false |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
computed: { |
||||
|
diaWidth() { |
||||
|
return this.resolution === 'small' ? 60 : 50 |
||||
|
}, |
||||
|
diaHeight() { |
||||
|
return this.resolution === 'small' ? 350 : 600 |
||||
|
}, |
||||
|
diaTop() { |
||||
|
return this.resolution === 'small' ? '30px' : '100px' |
||||
|
}, |
||||
|
...mapGetters(['clientHeight', 'resolution']) |
||||
|
}, |
||||
|
|
||||
|
mounted() { |
||||
|
this.getOptions() |
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
handleCheckAllChange(val) { |
||||
|
this.customerList.forEach((item) => { |
||||
|
item.selected = val |
||||
|
}) |
||||
|
this.isIndeterminate = false |
||||
|
}, |
||||
|
|
||||
|
copyToAll(val) { |
||||
|
this.customerList.forEach((item) => { |
||||
|
item.categoryKeyArr = [...val.categoryKeyArr] |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
async init(row) { |
||||
|
console.log('1111111111', row) |
||||
|
const { reportId, customerList } = row |
||||
|
this.visible = true |
||||
|
this.elseParams = { reportId } |
||||
|
this.startLoading() |
||||
|
|
||||
|
this.customerList = [] |
||||
|
|
||||
|
await this.getCustomerList() |
||||
|
|
||||
|
customerList.forEach((item) => { |
||||
|
let same = this.customerList.find( |
||||
|
(item2) => item2.customerId == item.customerId |
||||
|
) |
||||
|
if (same) { |
||||
|
same.selected = true |
||||
|
same.categoryKeyArr.push(item.categoryKey) |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
this.endLoading() |
||||
|
}, |
||||
|
|
||||
|
//获取所有客户列表 |
||||
|
async getCustomerList() { |
||||
|
const { data, code, msg } = await requestGet( |
||||
|
'/oper/crm/customer/getvalidcustomerlist', |
||||
|
{} |
||||
|
) |
||||
|
if (code === 0) { |
||||
|
this.customerList = data.map((item) => { |
||||
|
item.categoryKeyArr = [] |
||||
|
item.selected = false |
||||
|
return item |
||||
|
}) |
||||
|
} else { |
||||
|
this.$message.error(msg) |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
//获取所有客户列表 |
||||
|
async getOptions() { |
||||
|
const { data, code, msg } = await requestPost('/sys/dict/data/dictlist', { |
||||
|
dictType: 'jmreport_category' |
||||
|
}) |
||||
|
if (code === 0) { |
||||
|
this.categoryOptions = data |
||||
|
} else { |
||||
|
this.$message.error(msg) |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
async save() { |
||||
|
this.checkCustomerList = [] |
||||
|
const url = '/oper/customize/icCustomerReport/edit' |
||||
|
const parmas = { |
||||
|
...this.elseParams, |
||||
|
type: 'add', |
||||
|
customerList: this.customerList |
||||
|
.filter((item) => item.selected) |
||||
|
.map((item) => ({ |
||||
|
customerId: item.customerId, |
||||
|
categoryKeys: item.categoryKeyArr |
||||
|
})) |
||||
|
} |
||||
|
|
||||
|
const { data, code, msg } = await requestPost(url, parmas) |
||||
|
|
||||
|
if (code === 0) { |
||||
|
this.$message.success('保存成功') |
||||
|
this.visible = false |
||||
|
this.$emit('refreshDataList') |
||||
|
} else { |
||||
|
this.$message.error(msg) |
||||
|
} |
||||
|
}, |
||||
|
// 开启加载动画 |
||||
|
startLoading() { |
||||
|
loading = Loading.service({ |
||||
|
lock: true, // 是否锁定 |
||||
|
text: '正在加载……', // 加载中需要显示的文字 |
||||
|
background: 'rgba(0,0,0,.7)' // 背景颜色 |
||||
|
}) |
||||
|
}, |
||||
|
// 结束加载动画 |
||||
|
endLoading() { |
||||
|
// clearTimeout(timer); |
||||
|
if (loading) { |
||||
|
loading.close() |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.customerDiv { |
||||
|
margin-left: 100px; |
||||
|
overflow-y: scroll; |
||||
|
} |
||||
|
.customerItem { |
||||
|
margin: 20px; |
||||
|
font-size: 15px; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
.item-btn { |
||||
|
visibility: hidden; |
||||
|
} |
||||
|
&:hover { |
||||
|
.item-btn { |
||||
|
visibility: visible; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.item_span { |
||||
|
margin-left: 20px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,73 @@ |
|||||
|
<template> |
||||
|
<el-card shadow="never" class="aui-card--fill"> |
||||
|
<div class="mod-sys__menu"> |
||||
|
<el-table |
||||
|
v-loading="dataListLoading" |
||||
|
:data="dataList" |
||||
|
row-key="id" |
||||
|
border |
||||
|
:height="tableHeight" |
||||
|
style="width: 100%" |
||||
|
> |
||||
|
<el-table-column |
||||
|
prop="reportName" |
||||
|
label="模板名称" |
||||
|
header-align="center" |
||||
|
min-width="150" |
||||
|
></el-table-column> |
||||
|
<el-table-column |
||||
|
label="客户配置" |
||||
|
fixed="right" |
||||
|
header-align="center" |
||||
|
align="center" |
||||
|
width="150" |
||||
|
> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-button |
||||
|
type="text" |
||||
|
size="small" |
||||
|
@click="showCustomerMenu(scope.row)" |
||||
|
>{{ '客户配置' }}</el-button |
||||
|
> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
<!-- 客户菜单配置 --> |
||||
|
<customer-set ref="customerForm" @refreshDataList="getDataList" /> |
||||
|
</div> |
||||
|
</el-card> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import mixinViewModule from '@/mixins/view-module-post' |
||||
|
import { mapGetters } from 'vuex' |
||||
|
import CustomerSet from './customer-set' |
||||
|
|
||||
|
export default { |
||||
|
mixins: [mixinViewModule], |
||||
|
data() { |
||||
|
return { |
||||
|
mixinViewModuleOptions: { |
||||
|
getDataListURL: '/oper/customize/icCustomerReport/list' |
||||
|
}, |
||||
|
customerFormVisible: false, |
||||
|
dataForm: {} |
||||
|
} |
||||
|
}, |
||||
|
components: { |
||||
|
CustomerSet |
||||
|
}, |
||||
|
computed: { |
||||
|
tableHeight() { |
||||
|
// return this.resolution === 'small' ? this.clientHeight - 210 : this.clientHeight - 220 |
||||
|
return this.clientHeight - 210 |
||||
|
}, |
||||
|
...mapGetters(['clientHeight', 'resolution']) |
||||
|
}, |
||||
|
methods: { |
||||
|
showCustomerMenu(row) { |
||||
|
this.$refs['customerForm'].init(row) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
Loading…
Reference in new issue