|
|
@@ -1,371 +0,0 @@
|
|
|
-<template>
|
|
|
- <a-card :bordered="false">
|
|
|
- <a-form ref="searchFormRef" name="advanced_search" :model="searchFormState" class="ant-advanced-search-form">
|
|
|
- <a-row :gutter="24">
|
|
|
- <a-col :span="6">
|
|
|
- <a-form-item label="客户名称" name="searchKey">
|
|
|
- <a-input v-model:value="searchFormState.searchKey" placeholder="请输入客户名称" />
|
|
|
- </a-form-item>
|
|
|
- </a-col>
|
|
|
- <a-col :span="6">
|
|
|
- <a-button type="primary" @click="tableRef.refresh()">查询</a-button>
|
|
|
- <a-button style="margin: 0 8px" @click="reset">重置</a-button>
|
|
|
- </a-col>
|
|
|
- </a-row>
|
|
|
- </a-form>
|
|
|
- <s-table
|
|
|
- ref="tableRef"
|
|
|
- :columns="columns"
|
|
|
- :data="loadData"
|
|
|
- bordered
|
|
|
- :row-key="(record) => record.id"
|
|
|
- >
|
|
|
- <template #operator class="table-operator">
|
|
|
- <a-space>
|
|
|
- <a-button type="primary" @click="formRef.onOpen()" v-if="hasPerm('bizCustomerAdd')">
|
|
|
- <template #icon><plus-outlined /></template>
|
|
|
- 新增
|
|
|
- </a-button>
|
|
|
- </a-space>
|
|
|
- </template>
|
|
|
- <template #bodyCell="{ column, record, index }">
|
|
|
- <template v-if="column.dataIndex === 'serial'">
|
|
|
- {{ index + 1 }}
|
|
|
- </template>
|
|
|
- <template v-if="column.dataIndex === 'action'">
|
|
|
- <a-space>
|
|
|
- <a @click="formRef.onOpen(record)" v-if="hasPerm('bizCustomerEdit')">编辑</a>
|
|
|
- <a-divider type="vertical" v-if="hasPerm(['bizCustomerEdit', 'bizCustomerDelete'], 'and')" />
|
|
|
- <a-button type="link" danger size="small" v-if="hasPerm('bizCustomerDelete')" @click="deleteConfig(record)">删除</a-button>
|
|
|
- <a-divider type="vertical" v-if="hasPerm(['bizCustomerDelete', 'customerAccount'], 'and')" />
|
|
|
- <a @click="showMore(record)" v-if="hasPerm('customerAccount')">账号</a>
|
|
|
- </a-space>
|
|
|
- </template>
|
|
|
- </template>
|
|
|
- </s-table>
|
|
|
- </a-card>
|
|
|
- <Form ref="formRef" @successful="tableRef.refresh()" />
|
|
|
-
|
|
|
- <a-modal
|
|
|
- v-model:visible="moreFlag"
|
|
|
- title="关联账号信息"
|
|
|
- :footer="null"
|
|
|
- width="1100px"
|
|
|
- :body-style="{
|
|
|
- height: 'calc(100vh - 300px)',
|
|
|
- overflow: 'auto'
|
|
|
- }"
|
|
|
- @cancel="onCloseAccount"
|
|
|
- >
|
|
|
- <a-card :bordered="false">
|
|
|
- <a-button type="primary" @click="addAccount()" v-if="hasPerm('customerAccountAdd')" style="margin-bottom:10px;">
|
|
|
- <template #icon><plus-outlined /></template>
|
|
|
- 新增账号
|
|
|
- </a-button>
|
|
|
- <a-table ref="tableAccountRef" :columns="columns1" :data-source="data1" bordered :row-key="(record) => record.id">
|
|
|
- <template #bodyCell="{ column, record }">
|
|
|
- <template v-if="column.dataIndex === 'action'">
|
|
|
- <a @click="editAccount(record)" v-if="hasPerm('customerAccountEdit')">编辑</a>
|
|
|
- <a-divider type="vertical" v-if="hasPerm(['customerAccountEdit','customerAccountDelete'],'and')" />
|
|
|
- <a-popconfirm title="确定要删除吗？" @confirm="removeUser(record)">
|
|
|
- <a-button type="link" danger size="small" v-if="hasPerm('customerAccountDelete')">删除</a-button>
|
|
|
- </a-popconfirm>
|
|
|
- <a-divider type="vertical" v-if="hasPerm(['projectUserDelete','customerAccountRestPassword'],'and')"/>
|
|
|
- <a-popconfirm title="确定要重置密码吗？" @confirm="resetPassword(record)">
|
|
|
- <a-button type="link" v-if="hasPerm('customerAccountRestPassword')">重置密码</a-button>
|
|
|
- </a-popconfirm>
|
|
|
- </template>
|
|
|
- </template>
|
|
|
- </a-table>
|
|
|
- </a-card>
|
|
|
- </a-modal>
|
|
|
-
|
|
|
- <a-modal
|
|
|
- v-model:visible="editAccountFlag"
|
|
|
- :title="formData.id ? '编辑账号' : '添加账号'"
|
|
|
- class="custom-modal"
|
|
|
- width="800px"
|
|
|
- @ok="handleOk"
|
|
|
- @cancel="onClose"
|
|
|
- >
|
|
|
-
|
|
|
- <a-form ref="formSubmitRef" :model="formData" :rules="formRules" :wrapper-col="wrapperCol" :label-col="labelCol">
|
|
|
- <a-form-item label="账号：" name="account">
|
|
|
- <a-input v-model:value="formData.account" placeholder="请输入账号" allow-clear />
|
|
|
- </a-form-item>
|
|
|
- <a-form-item label="用户名称：" name="name">
|
|
|
- <a-input v-model:value="formData.name" placeholder="请输入用户名称" allow-clear />
|
|
|
- </a-form-item>
|
|
|
- <a-form-item label="手机号：" name="phone">
|
|
|
- <a-input v-model:value="formData.phone" placeholder="请输入手机号" allow-clear />
|
|
|
- </a-form-item>
|
|
|
- </a-form>
|
|
|
-
|
|
|
- </a-modal>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script setup name="bizcustomer">
|
|
|
- import { cloneDeep } from 'lodash-es'
|
|
|
- import Form from './form.vue'
|
|
|
- import bizCustomerApi from '@/api/biz/bizCustomerApi'
|
|
|
- import {ExclamationCircleOutlined} from '@ant-design/icons-vue';
|
|
|
- import {Modal} from 'ant-design-vue';
|
|
|
- import {createVNode} from 'vue';
|
|
|
- import bizUserApi from '@/api/biz/bizUserApi'
|
|
|
- import { required } from '@/utils/formRules'
|
|
|
-
|
|
|
- const searchFormState = ref({})
|
|
|
- const searchFormRef = ref()
|
|
|
- const tableRef = ref()
|
|
|
- const tableAccountRef = ref()
|
|
|
- const formRef = ref()
|
|
|
- const submitLoading = ref(false)
|
|
|
- const toolConfig = { refresh: true, height: true, columnSetting: true, striped: false }
|
|
|
- const moreFlag = ref(false)
|
|
|
- const editAccountFlag = ref(false)
|
|
|
- const data1 = ref([])
|
|
|
-
|
|
|
- // 表单数据
|
|
|
- const formData = ref({})
|
|
|
- const labelCol = ref({ span: 5})
|
|
|
- const wrapperCol = ref({ span: 16})
|
|
|
- const formSubmitRef = ref()
|
|
|
-
|
|
|
- const columns = [
|
|
|
- {
|
|
|
- title: '序号',
|
|
|
- width: 80,
|
|
|
- dataIndex: 'serial',
|
|
|
- align:'center'
|
|
|
- },
|
|
|
- {
|
|
|
- title: '客户名称',
|
|
|
- dataIndex: 'customerName',
|
|
|
- width:120,
|
|
|
- align:'center'
|
|
|
- },
|
|
|
- {
|
|
|
- title: '联系人',
|
|
|
- dataIndex: 'customerContactName',
|
|
|
- width:120,
|
|
|
- align:'center'
|
|
|
- },
|
|
|
- {
|
|
|
- title: '手机号',
|
|
|
- dataIndex: 'customerPhone',
|
|
|
- width:120,
|
|
|
- align:'center'
|
|
|
- },
|
|
|
- {
|
|
|
- title: '客户地址',
|
|
|
- dataIndex: 'customerAddress',
|
|
|
- width:180,
|
|
|
- align:'center'
|
|
|
- },
|
|
|
- ]
|
|
|
- // 操作栏通过权限判断是否显示
|
|
|
- columns.push({
|
|
|
- title: '操作',
|
|
|
- dataIndex: 'action',
|
|
|
- align: 'center',
|
|
|
- width: 150
|
|
|
- })
|
|
|
-
|
|
|
- const selectedRowKeys = ref([])
|
|
|
- // 列表选择配置
|
|
|
- const options = {
|
|
|
- // columns数字类型字段加入 needTotal: true 可以勾选自动算账
|
|
|
- alert: {
|
|
|
- show: true,
|
|
|
- clear: () => {
|
|
|
- selectedRowKeys.value = ref([])
|
|
|
- }
|
|
|
- },
|
|
|
- rowSelection: {
|
|
|
- onChange: (selectedRowKey, selectedRows) => {
|
|
|
- selectedRowKeys.value = selectedRowKey
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- const loadData = (parameter) => {
|
|
|
- const searchFormParam = cloneDeep(searchFormState.value)
|
|
|
- return bizCustomerApi.bizCustomerPage(Object.assign(parameter, searchFormParam)).then((data) => {
|
|
|
- return data
|
|
|
- })
|
|
|
- }
|
|
|
- // 重置
|
|
|
- const reset = () => {
|
|
|
- searchFormRef.value.resetFields()
|
|
|
- tableRef.value.refresh(true)
|
|
|
- }
|
|
|
- // 删除
|
|
|
- const deleteBizCustomer = (record) => {
|
|
|
- let params = [
|
|
|
- {
|
|
|
- id: record.id
|
|
|
- }
|
|
|
- ]
|
|
|
- bizCustomerApi.bizCustomerDelete(params).then(() => {
|
|
|
- tableRef.value.refresh(true)
|
|
|
- })
|
|
|
- }
|
|
|
- // 删除
|
|
|
- const deleteConfig = (record) => {
|
|
|
-
|
|
|
- Modal.confirm({
|
|
|
- title: '确定删除该数据吗？',
|
|
|
- icon: createVNode(ExclamationCircleOutlined),
|
|
|
- content: '',
|
|
|
- onOk() {
|
|
|
- submitLoading.value = true
|
|
|
- let params = [
|
|
|
- {
|
|
|
- id: record.id
|
|
|
- }
|
|
|
- ]
|
|
|
-
|
|
|
- bizCustomerApi
|
|
|
- .bizCustomerDelete(params)
|
|
|
- .then(() => {
|
|
|
- tableRef.value.refresh(true)
|
|
|
- })
|
|
|
- .finally(() => {
|
|
|
- submitLoading.value = false
|
|
|
- })
|
|
|
- },
|
|
|
- onCancel() {}
|
|
|
- })
|
|
|
- }
|
|
|
- // 批量删除
|
|
|
- const deleteBatchBizCustomer = (params) => {
|
|
|
- bizCustomerApi.bizCustomerDelete(params).then(() => {
|
|
|
- tableRef.value.clearRefreshSelected()
|
|
|
- })
|
|
|
- }
|
|
|
-
|
|
|
- //账号按钮点击时间
|
|
|
- const customerId = ref()
|
|
|
- const showMore = (record) => {
|
|
|
- customerId.value = record.id
|
|
|
- loadData1()
|
|
|
- moreFlag.value = true
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- const loadData1 = () => {
|
|
|
- let param={
|
|
|
- customerId:customerId.value
|
|
|
- }
|
|
|
- bizUserApi.getListByCustomerId(param).then((res)=>{
|
|
|
- data1.value = res
|
|
|
- })
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- const columns1 = [
|
|
|
- {
|
|
|
- title: '账号',
|
|
|
- dataIndex: 'account',
|
|
|
- align: 'center',
|
|
|
- resizable: true,
|
|
|
- ellipsis: true,
|
|
|
- width: 100
|
|
|
- },
|
|
|
- {
|
|
|
- title: '用户名称',
|
|
|
- dataIndex: 'name',
|
|
|
- align: 'center',
|
|
|
- resizable: true,
|
|
|
- ellipsis: true,
|
|
|
- width: 110
|
|
|
- },
|
|
|
- {
|
|
|
- title: '手机号',
|
|
|
- dataIndex: 'phone',
|
|
|
- align: 'center',
|
|
|
- resizable: true,
|
|
|
- ellipsis: true,
|
|
|
- width: 100
|
|
|
- },
|
|
|
- {
|
|
|
- title: '操作',
|
|
|
- dataIndex: 'action',
|
|
|
- align: 'center',
|
|
|
- fixed: 'right',
|
|
|
- width: 120,
|
|
|
- }
|
|
|
- ]
|
|
|
-
|
|
|
-
|
|
|
- //新增客户账号
|
|
|
- const addAccount = () =>{
|
|
|
- formData.value = {}
|
|
|
- formData.value.customerId = customerId.value
|
|
|
- editAccountFlag.value = true
|
|
|
- }
|
|
|
-
|
|
|
- const formRules = {
|
|
|
- account: [required('请输入账号')],
|
|
|
- name: [required('请输入用户姓名')],
|
|
|
- phone:[required('请输入手机号')],
|
|
|
- }
|
|
|
-
|
|
|
- //表单提交
|
|
|
- const handleOk = () => {
|
|
|
- formSubmitRef.value.validate().then(() => {
|
|
|
- submitLoading.value = true
|
|
|
- const formDataParam = cloneDeep(formData.value)
|
|
|
- bizUserApi
|
|
|
- .submitFormCustomer(formDataParam, formDataParam.id)
|
|
|
- .then(() => {
|
|
|
- onClose()
|
|
|
- emit('successful')
|
|
|
- })
|
|
|
- .finally(() => {
|
|
|
- submitLoading.value = false
|
|
|
- })
|
|
|
- })
|
|
|
- }
|
|
|
-
|
|
|
- const onClose = () => {
|
|
|
- formSubmitRef.value.resetFields()
|
|
|
- formData.value = {}
|
|
|
- editAccountFlag.value = false
|
|
|
- loadData1()
|
|
|
- }
|
|
|
-
|
|
|
- const editAccount = (record) => {
|
|
|
- formData.value = record
|
|
|
- editAccountFlag.value = true
|
|
|
- }
|
|
|
-
|
|
|
- //删除客户账号
|
|
|
- const removeUser = (record) => {
|
|
|
- let params = [
|
|
|
- {
|
|
|
- id: record.id
|
|
|
- }
|
|
|
- ]
|
|
|
- bizUserApi.userDelete(params).then(() => {
|
|
|
- loadData1()
|
|
|
- })
|
|
|
- }
|
|
|
-
|
|
|
- // 重置人员密码
|
|
|
- const resetPassword = (record) => {
|
|
|
- bizUserApi.userResetPassword(record).then(() => {})
|
|
|
- }
|
|
|
-
|
|
|
- const onCloseAccount = () => {
|
|
|
- moreFlag.value = false
|
|
|
- }
|
|
|
-
|
|
|
-</script>
|
|
|
-
|
|
|
-<style scoped>
|
|
|
-
|
|
|
-.custom-modal {
|
|
|
- height: 500px; /* 设置模态框的高度 */
|
|
|
- overflow: auto; /* 如果内容超出高度，显示滚动条 */
|
|
|
-}
|
|
|
-</style>
|
