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