refactor: define setup in script label
This commit is contained in:
zchengo
+427
-473
@@ -170,7 +170,7 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted, createVNode } from 'vue';
|
||||
import { SearchOutlined, ExclamationCircleOutlined, ExportOutlined } from '@ant-design/icons-vue';
|
||||
import moment from 'moment'
|
||||
@@ -179,507 +179,461 @@ import { queryProductList } from "../api/product";
|
||||
import { queryCustomerOption } from "../api/customer";
|
||||
import { message, Modal } from 'ant-design-vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
SearchOutlined,
|
||||
ExportOutlined
|
||||
},
|
||||
setup() {
|
||||
// 合同表格字段
|
||||
const columns = [{
|
||||
title: '合同编号',
|
||||
dataIndex: 'id',
|
||||
width: 100,
|
||||
fixed: 'left',
|
||||
ellipsis: true,
|
||||
}, {
|
||||
title: '合同名称',
|
||||
dataIndex: 'name',
|
||||
width: 100,
|
||||
fixed: 'left',
|
||||
ellipsis: true,
|
||||
}, {
|
||||
title: '客户名称',
|
||||
dataIndex: 'cname',
|
||||
width: 240,
|
||||
}, {
|
||||
title: '合同金额',
|
||||
dataIndex: 'amount',
|
||||
width: 100,
|
||||
}, {
|
||||
title: '合同开始时间',
|
||||
dataIndex: 'beginTime',
|
||||
width: 150,
|
||||
}, {
|
||||
title: '合同结束时间',
|
||||
dataIndex: 'overTime',
|
||||
width: 150,
|
||||
}, {
|
||||
title: '备注',
|
||||
dataIndex: 'remarks',
|
||||
width: 240,
|
||||
ellipsis: true,
|
||||
}, {
|
||||
title: '签约状态',
|
||||
dataIndex: 'status',
|
||||
width: 100,
|
||||
ellipsis: true,
|
||||
}, {
|
||||
title: '创建时间',
|
||||
dataIndex: 'created',
|
||||
width: 185,
|
||||
customRender: text => {
|
||||
return text.value == 0 ? '' : moment(text.value * 1000).format('YYYY-MM-DD HH:mm:ss')
|
||||
}
|
||||
}, {
|
||||
title: '更新时间',
|
||||
dataIndex: 'updated',
|
||||
width: 185,
|
||||
customRender: text => {
|
||||
return text.value == 0 ? '' : moment(text.value * 1000).format('YYYY-MM-DD HH:mm:ss')
|
||||
}
|
||||
}];
|
||||
|
||||
// 合同表格字段
|
||||
const columns = [{
|
||||
title: '合同编号',
|
||||
dataIndex: 'id',
|
||||
width: 100,
|
||||
fixed: 'left',
|
||||
ellipsis: true,
|
||||
}, {
|
||||
title: '合同名称',
|
||||
dataIndex: 'name',
|
||||
width: 100,
|
||||
fixed: 'left',
|
||||
ellipsis: true,
|
||||
}, {
|
||||
title: '客户名称',
|
||||
dataIndex: 'cname',
|
||||
width: 240,
|
||||
}, {
|
||||
title: '合同金额',
|
||||
dataIndex: 'amount',
|
||||
width: 100,
|
||||
}, {
|
||||
title: '合同开始时间',
|
||||
dataIndex: 'beginTime',
|
||||
width: 150,
|
||||
}, {
|
||||
title: '合同结束时间',
|
||||
dataIndex: 'overTime',
|
||||
width: 150,
|
||||
}, {
|
||||
title: '备注',
|
||||
dataIndex: 'remarks',
|
||||
width: 240,
|
||||
ellipsis: true,
|
||||
}, {
|
||||
title: '签约状态',
|
||||
dataIndex: 'status',
|
||||
width: 100,
|
||||
ellipsis: true,
|
||||
}, {
|
||||
title: '创建时间',
|
||||
dataIndex: 'created',
|
||||
width: 185,
|
||||
customRender: text => {
|
||||
return text.value == 0 ? '' : moment(text.value * 1000).format('YYYY-MM-DD HH:mm:ss')
|
||||
}
|
||||
}, {
|
||||
title: '更新时间',
|
||||
dataIndex: 'updated',
|
||||
width: 185,
|
||||
customRender: text => {
|
||||
return text.value == 0 ? '' : moment(text.value * 1000).format('YYYY-MM-DD HH:mm:ss')
|
||||
}
|
||||
}];
|
||||
// 新建或编辑合同，已添加产品表格字段
|
||||
const productColumns = [{
|
||||
title: '产品名称',
|
||||
dataIndex: 'name',
|
||||
width: 100,
|
||||
}, {
|
||||
title: '产品类别',
|
||||
dataIndex: 'type',
|
||||
width: 90,
|
||||
}, {
|
||||
title: '单位',
|
||||
dataIndex: 'unit',
|
||||
width: 80,
|
||||
}, {
|
||||
title: '价格',
|
||||
dataIndex: 'price',
|
||||
width: 100,
|
||||
}, {
|
||||
title: '数量',
|
||||
dataIndex: 'count',
|
||||
width: 120,
|
||||
}, {
|
||||
title: '合计',
|
||||
dataIndex: 'total',
|
||||
width: 100,
|
||||
}, {
|
||||
title: '操作',
|
||||
dataIndex: 'operation',
|
||||
width: 100,
|
||||
}]
|
||||
|
||||
// 新建或编辑合同，已添加产品表格字段
|
||||
const productColumns = [{
|
||||
title: '产品名称',
|
||||
dataIndex: 'name',
|
||||
width: 100,
|
||||
}, {
|
||||
title: '产品类别',
|
||||
dataIndex: 'type',
|
||||
width: 90,
|
||||
}, {
|
||||
title: '单位',
|
||||
dataIndex: 'unit',
|
||||
width: 80,
|
||||
}, {
|
||||
title: '价格',
|
||||
dataIndex: 'price',
|
||||
width: 100,
|
||||
}, {
|
||||
title: '数量',
|
||||
dataIndex: 'count',
|
||||
width: 120,
|
||||
}, {
|
||||
title: '合计',
|
||||
dataIndex: 'total',
|
||||
width: 100,
|
||||
}, {
|
||||
title: '操作',
|
||||
dataIndex: 'operation',
|
||||
width: 100,
|
||||
}]
|
||||
// 产品表格字段
|
||||
const productListColumns = [{
|
||||
title: '产品名称',
|
||||
dataIndex: 'name',
|
||||
width: 100,
|
||||
fixed: 'left',
|
||||
ellipsis: true,
|
||||
}, {
|
||||
title: '是否上下架',
|
||||
dataIndex: 'status',
|
||||
width: 120,
|
||||
}, {
|
||||
title: '产品类型',
|
||||
dataIndex: 'type',
|
||||
width: 100,
|
||||
}, {
|
||||
title: '产品单位',
|
||||
dataIndex: 'unit',
|
||||
width: 100,
|
||||
}, {
|
||||
title: '产品编码',
|
||||
dataIndex: 'code',
|
||||
width: 150,
|
||||
}, {
|
||||
title: '价格',
|
||||
dataIndex: 'price',
|
||||
width: 150,
|
||||
}, {
|
||||
title: '产品描述',
|
||||
dataIndex: 'description',
|
||||
width: 240,
|
||||
ellipsis: true,
|
||||
}, {
|
||||
title: '创建时间',
|
||||
dataIndex: 'created',
|
||||
width: 185,
|
||||
customRender: text => {
|
||||
let m = moment(text.value * 1000).format('YYYY-MM-DD HH:mm:ss')
|
||||
return m == 'Invalid date' ? '' : m
|
||||
}
|
||||
}, {
|
||||
title: '更新时间',
|
||||
dataIndex: 'updated',
|
||||
width: 185,
|
||||
customRender: text => {
|
||||
let m = moment(text.value * 1000).format('YYYY-MM-DD HH:mm:ss')
|
||||
return m == 'Invalid date' ? '' : m
|
||||
}
|
||||
}, {
|
||||
title: '创建人',
|
||||
dataIndex: 'creator',
|
||||
width: 150,
|
||||
}];
|
||||
|
||||
// 产品表格字段
|
||||
const productListColumns = [{
|
||||
title: '产品名称',
|
||||
dataIndex: 'name',
|
||||
width: 100,
|
||||
fixed: 'left',
|
||||
ellipsis: true,
|
||||
}, {
|
||||
title: '是否上下架',
|
||||
dataIndex: 'status',
|
||||
width: 120,
|
||||
}, {
|
||||
title: '产品类型',
|
||||
dataIndex: 'type',
|
||||
width: 100,
|
||||
}, {
|
||||
title: '产品单位',
|
||||
dataIndex: 'unit',
|
||||
width: 100,
|
||||
}, {
|
||||
title: '产品编码',
|
||||
dataIndex: 'code',
|
||||
width: 150,
|
||||
}, {
|
||||
title: '价格',
|
||||
dataIndex: 'price',
|
||||
width: 150,
|
||||
}, {
|
||||
title: '产品描述',
|
||||
dataIndex: 'description',
|
||||
width: 240,
|
||||
ellipsis: true,
|
||||
}, {
|
||||
title: '创建时间',
|
||||
dataIndex: 'created',
|
||||
width: 185,
|
||||
customRender: text => {
|
||||
let m = moment(text.value * 1000).format('YYYY-MM-DD HH:mm:ss')
|
||||
return m == 'Invalid date' ? '' : m
|
||||
}
|
||||
}, {
|
||||
title: '更新时间',
|
||||
dataIndex: 'updated',
|
||||
width: 185,
|
||||
customRender: text => {
|
||||
let m = moment(text.value * 1000).format('YYYY-MM-DD HH:mm:ss')
|
||||
return m == 'Invalid date' ? '' : m
|
||||
}
|
||||
}, {
|
||||
title: '创建人',
|
||||
dataIndex: 'creator',
|
||||
width: 150,
|
||||
}];
|
||||
// 表单校验
|
||||
const rules = {
|
||||
name: [{ required: true, message: '请输入合同名称', trigger: 'blur' }],
|
||||
cid: [{ required: true, message: '请选择客户', trigger: 'blur' }],
|
||||
status: [{ required: true, message: '请选择合同状态' }]
|
||||
};
|
||||
|
||||
// 表单校验
|
||||
const rules = {
|
||||
name: [{ required: true, message: '请输入合同名称', trigger: 'blur' }],
|
||||
cid: [{ required: true, message: '请选择客户', trigger: 'blur' }],
|
||||
status: [{ required: true, message: '请选择合同状态' }]
|
||||
};
|
||||
// 合同属性
|
||||
let contract = reactive({
|
||||
id: undefined,
|
||||
name: undefined,
|
||||
amount: undefined,
|
||||
beginTime: '',
|
||||
overTime: '',
|
||||
cid: undefined,
|
||||
remarks: undefined,
|
||||
status: undefined,
|
||||
productlist: [],
|
||||
});
|
||||
|
||||
// 合同属性
|
||||
let contract = reactive({
|
||||
id: undefined,
|
||||
name: undefined,
|
||||
amount: undefined,
|
||||
beginTime: '',
|
||||
overTime: '',
|
||||
cid: undefined,
|
||||
remarks: undefined,
|
||||
status: undefined,
|
||||
productlist: [],
|
||||
});
|
||||
const data = reactive({
|
||||
contractId: 0,
|
||||
contractList: [],
|
||||
contractIds: [],
|
||||
productList: [],
|
||||
productIds: [],
|
||||
addedProductList: [],
|
||||
customerOption: [],
|
||||
defaultSelectedIds: []
|
||||
})
|
||||
|
||||
const data = reactive({
|
||||
contractId: 0,
|
||||
contractList: [],
|
||||
contractIds: [],
|
||||
productList: [],
|
||||
productIds: [],
|
||||
addedProductList: [],
|
||||
customerOption: [],
|
||||
defaultSelectedIds: []
|
||||
})
|
||||
// 表格分页
|
||||
let pagination = reactive({
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
total: undefined,
|
||||
})
|
||||
|
||||
// 表格分页
|
||||
let pagination = reactive({
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
total: undefined,
|
||||
})
|
||||
// 点击搜索
|
||||
const onSearch = () => { getContractList() };
|
||||
|
||||
// 点击搜索
|
||||
const onSearch = () => { getContractList() };
|
||||
const title = ref('');
|
||||
const visible = ref(false);
|
||||
const disabled = ref(true)
|
||||
const operation = ref(0);
|
||||
const contractFormRef = ref();
|
||||
const keyWord = ref('')
|
||||
const productListVisible = ref(false);
|
||||
|
||||
const title = ref('');
|
||||
const visible = ref(false);
|
||||
const disabled = ref(true)
|
||||
const operation = ref(0);
|
||||
const contractFormRef = ref();
|
||||
const keyWord = ref('')
|
||||
const productListVisible = ref(false);
|
||||
// 点击新建合同
|
||||
const onCreate = () => {
|
||||
title.value = '新建合同'
|
||||
operation.value = 1
|
||||
visible.value = true
|
||||
}
|
||||
|
||||
// 点击新建合同
|
||||
const onCreate = () => {
|
||||
title.value = '新建合同'
|
||||
operation.value = 1
|
||||
visible.value = true
|
||||
// 点击编辑合同
|
||||
const onEdit = (row) => {
|
||||
title.value = '编辑合同'
|
||||
operation.value = 2
|
||||
getCustomerOption()
|
||||
let param = { id: row.id }
|
||||
queryContractInfo(param).then((res) => {
|
||||
if (res.data.code == 0) {
|
||||
let p = res.data.data
|
||||
contract.id = p.id
|
||||
contract.name = p.name
|
||||
contract.cid = p.cid
|
||||
contract.amount = p.amount
|
||||
contract.beginTime = p.beginTime
|
||||
contract.overTime = p.overTime
|
||||
contract.remarks = p.remarks
|
||||
contract.status = p.status
|
||||
contract.productlist = p.productlist
|
||||
data.addedProductList = p.productlist
|
||||
}
|
||||
})
|
||||
data.contractId = row.id
|
||||
visible.value = true
|
||||
}
|
||||
|
||||
// 点击编辑合同
|
||||
const onEdit = (row) => {
|
||||
title.value = '编辑合同'
|
||||
operation.value = 2
|
||||
getCustomerOption()
|
||||
let param = { id: row.id }
|
||||
queryContractInfo(param).then((res) => {
|
||||
if (res.data.code == 0) {
|
||||
let p = res.data.data
|
||||
contract.id = p.id
|
||||
contract.name = p.name
|
||||
contract.cid = p.cid
|
||||
contract.amount = p.amount
|
||||
contract.beginTime = p.beginTime
|
||||
contract.overTime = p.overTime
|
||||
contract.remarks = p.remarks
|
||||
contract.status = p.status
|
||||
contract.productlist = p.productlist
|
||||
data.addedProductList = p.productlist
|
||||
}
|
||||
})
|
||||
data.contractId = row.id
|
||||
visible.value = true
|
||||
}
|
||||
|
||||
// 点击保存合同
|
||||
const onSave = () => {
|
||||
contractFormRef.value.validateFields().then(() => {
|
||||
if (operation.value == 1) {
|
||||
let param = {
|
||||
name: contract.name,
|
||||
cid: contract.cid,
|
||||
amount: contract.amount,
|
||||
beginTime: contract.beginTime,
|
||||
overTime: contract.overTime,
|
||||
remarks: contract.remarks,
|
||||
status: contract.status,
|
||||
productlist: data.addedProductList,
|
||||
}
|
||||
createContract(param).then((res) => {
|
||||
if (res.data.code == 0) {
|
||||
message.success('保存成功')
|
||||
data.defaultSelectedIds = []
|
||||
getContractList()
|
||||
}
|
||||
})
|
||||
}
|
||||
if (operation.value == 2) {
|
||||
let param = {
|
||||
id: contract.id,
|
||||
name: contract.name,
|
||||
cid: contract.cid,
|
||||
amount: contract.amount,
|
||||
beginTime: contract.beginTime,
|
||||
overTime: contract.overTime,
|
||||
remarks: contract.remarks,
|
||||
status: contract.status,
|
||||
productlist: data.addedProductList,
|
||||
}
|
||||
updateContract(param).then((res) => {
|
||||
if (res.data.code == 0) {
|
||||
message.success('保存成功')
|
||||
data.defaultSelectedIds = []
|
||||
getContractList()
|
||||
}
|
||||
})
|
||||
}
|
||||
contractFormRef.value.resetFields()
|
||||
visible.value = false;
|
||||
});
|
||||
};
|
||||
|
||||
// 点击删除合同
|
||||
const onDelete = () => {
|
||||
// 点击保存合同
|
||||
const onSave = () => {
|
||||
contractFormRef.value.validateFields().then(() => {
|
||||
if (operation.value == 1) {
|
||||
let param = {
|
||||
ids: data.contractIds
|
||||
name: contract.name,
|
||||
cid: contract.cid,
|
||||
amount: contract.amount,
|
||||
beginTime: contract.beginTime,
|
||||
overTime: contract.overTime,
|
||||
remarks: contract.remarks,
|
||||
status: contract.status,
|
||||
productlist: data.addedProductList,
|
||||
}
|
||||
Modal.confirm({
|
||||
title: '确定删除选中的' + data.contractIds.length + '项吗?',
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
centered: true,
|
||||
cancelText: '取消',
|
||||
okText: '确定',
|
||||
onOk() {
|
||||
deleteContract(param).then((res) => {
|
||||
if (res.data.code == 0) {
|
||||
getContractList()
|
||||
disabled.value = true
|
||||
message.success('删除成功')
|
||||
}
|
||||
})
|
||||
},
|
||||
onCancel() {
|
||||
console.log('Cancel');
|
||||
},
|
||||
});
|
||||
createContract(param).then((res) => {
|
||||
if (res.data.code == 0) {
|
||||
message.success('保存成功')
|
||||
data.defaultSelectedIds = []
|
||||
getContractList()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 初始化数据
|
||||
onMounted(() => { getContractList() })
|
||||
|
||||
// 点击全部合同
|
||||
const onContracts = () => {
|
||||
keyWord.value = ''
|
||||
getContractList()
|
||||
}
|
||||
|
||||
// 分页查询合同列表
|
||||
const onPagination = (page) => {
|
||||
pagination.current = page
|
||||
getContractList()
|
||||
}
|
||||
const getContractList = () => {
|
||||
if (operation.value == 2) {
|
||||
let param = {
|
||||
id: parseInt(keyWord.value == '' ? '0' : keyWord.value),
|
||||
pageNum: pagination.current,
|
||||
pageSize: pagination.pageSize
|
||||
id: contract.id,
|
||||
name: contract.name,
|
||||
cid: contract.cid,
|
||||
amount: contract.amount,
|
||||
beginTime: contract.beginTime,
|
||||
overTime: contract.overTime,
|
||||
remarks: contract.remarks,
|
||||
status: contract.status,
|
||||
productlist: data.addedProductList,
|
||||
}
|
||||
queryContractList(param).then((res) => {
|
||||
updateContract(param).then((res) => {
|
||||
if (res.data.code == 0) {
|
||||
pagination.total = res.data.data.total
|
||||
data.contractList = res.data.data.list
|
||||
message.success('保存成功')
|
||||
data.defaultSelectedIds = []
|
||||
getContractList()
|
||||
}
|
||||
})
|
||||
}
|
||||
contractFormRef.value.resetFields()
|
||||
visible.value = false;
|
||||
});
|
||||
};
|
||||
|
||||
// 点击添加产品
|
||||
const onAddProduct = () => {
|
||||
let param = {
|
||||
pageNum: pagination.current,
|
||||
pageSize: pagination.pageSize
|
||||
}
|
||||
queryProductList(param).then((res) => {
|
||||
// 点击删除合同
|
||||
const onDelete = () => {
|
||||
let param = {
|
||||
ids: data.contractIds
|
||||
}
|
||||
Modal.confirm({
|
||||
title: '确定删除选中的' + data.contractIds.length + '项吗?',
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
centered: true,
|
||||
cancelText: '取消',
|
||||
okText: '确定',
|
||||
onOk() {
|
||||
deleteContract(param).then((res) => {
|
||||
if (res.data.code == 0) {
|
||||
pagination.total = res.data.data.total
|
||||
data.productList = res.data.data.list
|
||||
getContractList()
|
||||
disabled.value = true
|
||||
message.success('删除成功')
|
||||
}
|
||||
})
|
||||
data.defaultSelectedIds = []
|
||||
if (data.addedProductList.length > 0) {
|
||||
for (let i = 0; i < data.addedProductList.length; i++) {
|
||||
data.defaultSelectedIds[i] = data.addedProductList[i].id
|
||||
}
|
||||
}
|
||||
productListVisible.value = true
|
||||
}
|
||||
},
|
||||
onCancel() {
|
||||
console.log('Cancel');
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
// 分页查询产品列表
|
||||
const onPaginationProduct = (page) => {
|
||||
pagination.current = page
|
||||
let param = {
|
||||
pageNum: pagination.current,
|
||||
pageSize: pagination.pageSize
|
||||
}
|
||||
queryProductList(param).then((res) => {
|
||||
if (res.data.code == 0) {
|
||||
pagination.total = res.data.data.total
|
||||
data.productList = res.data.data.list
|
||||
}
|
||||
// 初始化数据
|
||||
onMounted(() => { getContractList() })
|
||||
|
||||
// 点击全部合同
|
||||
const onContracts = () => {
|
||||
keyWord.value = ''
|
||||
getContractList()
|
||||
}
|
||||
|
||||
// 分页查询合同列表
|
||||
const onPagination = (page) => {
|
||||
pagination.current = page
|
||||
getContractList()
|
||||
}
|
||||
const getContractList = () => {
|
||||
let param = {
|
||||
id: parseInt(keyWord.value == '' ? '0' : keyWord.value),
|
||||
pageNum: pagination.current,
|
||||
pageSize: pagination.pageSize
|
||||
}
|
||||
queryContractList(param).then((res) => {
|
||||
if (res.data.code == 0) {
|
||||
pagination.total = res.data.data.total
|
||||
data.contractList = res.data.data.list
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 点击添加产品
|
||||
const onAddProduct = () => {
|
||||
let param = {
|
||||
pageNum: pagination.current,
|
||||
pageSize: pagination.pageSize
|
||||
}
|
||||
queryProductList(param).then((res) => {
|
||||
if (res.data.code == 0) {
|
||||
pagination.total = res.data.data.total
|
||||
data.productList = res.data.data.list
|
||||
}
|
||||
})
|
||||
data.defaultSelectedIds = []
|
||||
if (data.addedProductList.length > 0) {
|
||||
for (let i = 0; i < data.addedProductList.length; i++) {
|
||||
data.defaultSelectedIds[i] = data.addedProductList[i].id
|
||||
}
|
||||
}
|
||||
productListVisible.value = true
|
||||
}
|
||||
|
||||
// 分页查询产品列表
|
||||
const onPaginationProduct = (page) => {
|
||||
pagination.current = page
|
||||
let param = {
|
||||
pageNum: pagination.current,
|
||||
pageSize: pagination.pageSize
|
||||
}
|
||||
queryProductList(param).then((res) => {
|
||||
if (res.data.code == 0) {
|
||||
pagination.total = res.data.data.total
|
||||
data.productList = res.data.data.list
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 已选中的合同ID
|
||||
const onSelectedConteactIds = selectedRowKeys => {
|
||||
data.contractIds = selectedRowKeys
|
||||
if (data.contractIds.length !== 0) {
|
||||
disabled.value = false
|
||||
} else {
|
||||
disabled.value = true
|
||||
}
|
||||
};
|
||||
|
||||
// 已选中的产品ID
|
||||
const onSelectedProductIds = selectedRowKeys => {
|
||||
data.productIds = selectedRowKeys
|
||||
data.defaultSelectedIds = selectedRowKeys
|
||||
};
|
||||
|
||||
// 删除选中的产品
|
||||
const delProduct = (row) => {
|
||||
for (let i = 0; i < data.addedProductList.length; i++) {
|
||||
if (data.addedProductList[i].id == row.id) {
|
||||
data.addedProductList.splice(i, 1);
|
||||
}
|
||||
}
|
||||
calculatedAmount()
|
||||
}
|
||||
|
||||
// 点击确定选中的产品ID
|
||||
const onConfirm = () => {
|
||||
console.log("xzx", data.productIds)
|
||||
let param = {
|
||||
id: data.contractId,
|
||||
pids: data.productIds
|
||||
}
|
||||
queryContractPlist(param).then((res) => {
|
||||
if (res.data.code == 0) {
|
||||
data.addedProductList = res.data.data
|
||||
}
|
||||
})
|
||||
productListVisible.value = false
|
||||
}
|
||||
|
||||
// 查询客户选项
|
||||
const getCustomerOption = () => {
|
||||
queryCustomerOption().then((res) => {
|
||||
if (res.data.code == 0) {
|
||||
data.customerOption = res.data.data
|
||||
console.log("zxxzc", data.customerOption)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const changeCustomerOption = (value) => {
|
||||
contract.cid.value = value
|
||||
}
|
||||
|
||||
// 计算金额
|
||||
const calculatedAmount = () => {
|
||||
contract.amount = 0
|
||||
let totalAmount = 0
|
||||
for (let i = 0; i < data.addedProductList.length; i++) {
|
||||
totalAmount = totalAmount + (data.addedProductList[i].price * data.addedProductList[i].count)
|
||||
}
|
||||
contract.amount = totalAmount
|
||||
}
|
||||
|
||||
// 点击合同取消按钮
|
||||
const onCancel = () => {
|
||||
contractFormRef.value.resetFields()
|
||||
data.addedProductList = []
|
||||
data.contractId = undefined
|
||||
visible.value = false
|
||||
};
|
||||
|
||||
// 导出表格
|
||||
const onExport = () => {
|
||||
contractExport().then((res) => {
|
||||
if (res.data.type == 'application/json') {
|
||||
message.error('导出错误！')
|
||||
} else {
|
||||
let blob = new Blob([res.data], {
|
||||
type: "application/vnd.ms-excel"
|
||||
})
|
||||
let a = document.createElement('a')
|
||||
a.setAttribute("download", "合同信息.xlsx");
|
||||
a.href = window.URL.createObjectURL(blob)
|
||||
a.click()
|
||||
window.URL.revokeObjectURL(a.href)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 已选中的合同ID
|
||||
const onSelectedConteactIds = selectedRowKeys => {
|
||||
data.contractIds = selectedRowKeys
|
||||
if (data.contractIds.length !== 0) {
|
||||
disabled.value = false
|
||||
} else {
|
||||
disabled.value = true
|
||||
}
|
||||
};
|
||||
|
||||
// 已选中的产品ID
|
||||
const onSelectedProductIds = selectedRowKeys => {
|
||||
data.productIds = selectedRowKeys
|
||||
data.defaultSelectedIds = selectedRowKeys
|
||||
};
|
||||
|
||||
// 删除选中的产品
|
||||
const delProduct = (row) => {
|
||||
for (let i = 0; i < data.addedProductList.length; i++) {
|
||||
if (data.addedProductList[i].id == row.id) {
|
||||
data.addedProductList.splice(i, 1);
|
||||
}
|
||||
}
|
||||
calculatedAmount()
|
||||
}
|
||||
|
||||
// 点击确定选中的产品ID
|
||||
const onConfirm = () => {
|
||||
console.log("xzx", data.productIds)
|
||||
let param = {
|
||||
id: data.contractId,
|
||||
pids: data.productIds
|
||||
}
|
||||
queryContractPlist(param).then((res) => {
|
||||
if (res.data.code == 0) {
|
||||
data.addedProductList = res.data.data
|
||||
}
|
||||
})
|
||||
productListVisible.value = false
|
||||
}
|
||||
|
||||
// 查询客户选项
|
||||
const getCustomerOption = () => {
|
||||
queryCustomerOption().then((res) => {
|
||||
if (res.data.code == 0) {
|
||||
data.customerOption = res.data.data
|
||||
console.log("zxxzc", data.customerOption)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const changeCustomerOption = (value) => {
|
||||
contract.cid.value = value
|
||||
}
|
||||
|
||||
// 计算金额
|
||||
const calculatedAmount = () => {
|
||||
contract.amount = 0
|
||||
let totalAmount = 0
|
||||
for (let i = 0; i < data.addedProductList.length; i++) {
|
||||
totalAmount = totalAmount + (data.addedProductList[i].price * data.addedProductList[i].count)
|
||||
}
|
||||
contract.amount = totalAmount
|
||||
}
|
||||
|
||||
// 点击合同取消按钮
|
||||
const onCancel = () => {
|
||||
contractFormRef.value.resetFields()
|
||||
data.addedProductList = []
|
||||
data.contractId = undefined
|
||||
visible.value = false
|
||||
};
|
||||
|
||||
// 导出表格
|
||||
const onExport = () => {
|
||||
contractExport().then((res) => {
|
||||
if (res.data.type == 'application/json'){
|
||||
message.error('导出错误！')
|
||||
} else {
|
||||
let blob = new Blob([res.data], {
|
||||
type: "application/vnd.ms-excel"
|
||||
})
|
||||
let a = document.createElement('a')
|
||||
a.setAttribute("download", "合同信息.xlsx");
|
||||
a.href = window.URL.createObjectURL(blob)
|
||||
a.click()
|
||||
window.URL.revokeObjectURL(a.href)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 点击取消产品列表
|
||||
const onCancelProductList = () => {
|
||||
productListVisible.value = false
|
||||
data.contractId = undefined
|
||||
pagination.current = 1,
|
||||
pagination.total = undefined
|
||||
}
|
||||
|
||||
return {
|
||||
columns,
|
||||
productColumns,
|
||||
productListColumns,
|
||||
rules,
|
||||
data,
|
||||
onSelectedConteactIds,
|
||||
onSelectedProductIds,
|
||||
onSearch,
|
||||
contract,
|
||||
title,
|
||||
visible,
|
||||
disabled,
|
||||
productListVisible,
|
||||
operation,
|
||||
onCreate,
|
||||
onEdit,
|
||||
contractFormRef,
|
||||
onSave,
|
||||
onCancel,
|
||||
onDelete,
|
||||
onCancelProductList,
|
||||
getContractList,
|
||||
keyWord,
|
||||
onConfirm,
|
||||
onAddProduct,
|
||||
getCustomerOption,
|
||||
changeCustomerOption,
|
||||
calculatedAmount,
|
||||
delProduct,
|
||||
pagination,
|
||||
onPagination,
|
||||
onExport,
|
||||
onContracts,
|
||||
onPaginationProduct,
|
||||
};
|
||||
},
|
||||
// 点击取消产品列表
|
||||
const onCancelProductList = () => {
|
||||
productListVisible.value = false
|
||||
data.contractId = undefined
|
||||
pagination.current = 1,
|
||||
pagination.total = undefined
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
+280
-321
@@ -160,7 +160,7 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted, createVNode } from 'vue';
|
||||
import { SearchOutlined, ExclamationCircleOutlined, ExportOutlined, MailTwoTone } from '@ant-design/icons-vue';
|
||||
import moment from 'moment'
|
||||
@@ -168,351 +168,310 @@ import { createCustomer, updateCustomer, sendMailToCustomer, queryCustomerList,
|
||||
import { message, Modal } from 'ant-design-vue';
|
||||
import regionData from '../assets/region';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
SearchOutlined,
|
||||
ExportOutlined,
|
||||
MailTwoTone
|
||||
},
|
||||
setup() {
|
||||
const columns = [{
|
||||
title: '客户名称',
|
||||
dataIndex: 'name',
|
||||
width: 200,
|
||||
fixed: 'left',
|
||||
ellipsis: true,
|
||||
}, {
|
||||
title: '客户来源',
|
||||
dataIndex: 'source',
|
||||
width: 150,
|
||||
}, {
|
||||
title: '手机号',
|
||||
dataIndex: 'phone',
|
||||
width: 150,
|
||||
}, {
|
||||
title: '邮箱',
|
||||
dataIndex: 'email',
|
||||
width: 200,
|
||||
}, {
|
||||
title: '客户行业',
|
||||
dataIndex: 'industry',
|
||||
width: 150,
|
||||
}, {
|
||||
title: '客户级别',
|
||||
dataIndex: 'level',
|
||||
width: 150,
|
||||
}, {
|
||||
title: '备注',
|
||||
dataIndex: 'remarks',
|
||||
width: 150,
|
||||
ellipsis: true,
|
||||
}, {
|
||||
title: '成交状态',
|
||||
dataIndex: 'status',
|
||||
width: 150,
|
||||
}, {
|
||||
title: '详细地址',
|
||||
dataIndex: 'address',
|
||||
width: 240,
|
||||
ellipsis: true,
|
||||
}, {
|
||||
title: '创建时间',
|
||||
dataIndex: 'created',
|
||||
width: 185,
|
||||
customRender: text => {
|
||||
return text == 0 ? '' : moment(text.value * 1000).format('YYYY-MM-DD HH:mm:ss')
|
||||
}
|
||||
}, {
|
||||
title: '更新时间',
|
||||
dataIndex: 'updated',
|
||||
width: 185,
|
||||
customRender: text => {
|
||||
return text.value == 0 ? '' : moment(text.value * 1000).format('YYYY-MM-DD HH:mm:ss')
|
||||
}
|
||||
}, {
|
||||
title: '操作',
|
||||
dataIndex: 'operation',
|
||||
width: 65,
|
||||
fixed: 'right',
|
||||
ellipsis: true,
|
||||
}];
|
||||
// 表格字段
|
||||
const columns = [{
|
||||
title: '客户名称',
|
||||
dataIndex: 'name',
|
||||
width: 200,
|
||||
fixed: 'left',
|
||||
ellipsis: true,
|
||||
}, {
|
||||
title: '客户来源',
|
||||
dataIndex: 'source',
|
||||
width: 150,
|
||||
}, {
|
||||
title: '手机号',
|
||||
dataIndex: 'phone',
|
||||
width: 150,
|
||||
}, {
|
||||
title: '邮箱',
|
||||
dataIndex: 'email',
|
||||
width: 200,
|
||||
}, {
|
||||
title: '客户行业',
|
||||
dataIndex: 'industry',
|
||||
width: 150,
|
||||
}, {
|
||||
title: '客户级别',
|
||||
dataIndex: 'level',
|
||||
width: 150,
|
||||
}, {
|
||||
title: '备注',
|
||||
dataIndex: 'remarks',
|
||||
width: 150,
|
||||
ellipsis: true,
|
||||
}, {
|
||||
title: '成交状态',
|
||||
dataIndex: 'status',
|
||||
width: 150,
|
||||
}, {
|
||||
title: '详细地址',
|
||||
dataIndex: 'address',
|
||||
width: 240,
|
||||
ellipsis: true,
|
||||
}, {
|
||||
title: '创建时间',
|
||||
dataIndex: 'created',
|
||||
width: 185,
|
||||
customRender: text => {
|
||||
return text == 0 ? '' : moment(text.value * 1000).format('YYYY-MM-DD HH:mm:ss')
|
||||
}
|
||||
}, {
|
||||
title: '更新时间',
|
||||
dataIndex: 'updated',
|
||||
width: 185,
|
||||
customRender: text => {
|
||||
return text.value == 0 ? '' : moment(text.value * 1000).format('YYYY-MM-DD HH:mm:ss')
|
||||
}
|
||||
}, {
|
||||
title: '操作',
|
||||
dataIndex: 'operation',
|
||||
width: 65,
|
||||
fixed: 'right',
|
||||
ellipsis: true,
|
||||
}];
|
||||
|
||||
// 表单校验
|
||||
const rules = {
|
||||
name: [{ required: true, message: '请输入客户名称', trigger: 'blur' }],
|
||||
phone: [{
|
||||
pattern: /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/,
|
||||
message: '手机格式不正确',
|
||||
trigger: 'blur',
|
||||
}],
|
||||
email: [{
|
||||
pattern: /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/,
|
||||
message: '邮箱格式不正确',
|
||||
trigger: 'blur',
|
||||
}],
|
||||
};
|
||||
// 表单校验
|
||||
const rules = {
|
||||
name: [{ required: true, message: '请输入客户名称', trigger: 'blur' }],
|
||||
phone: [{
|
||||
pattern: /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/,
|
||||
message: '手机格式不正确',
|
||||
trigger: 'blur',
|
||||
}],
|
||||
email: [{
|
||||
pattern: /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/,
|
||||
message: '邮箱格式不正确',
|
||||
trigger: 'blur',
|
||||
}],
|
||||
};
|
||||
|
||||
const data = reactive({
|
||||
customerList: [],
|
||||
selectedIds: []
|
||||
})
|
||||
const data = reactive({
|
||||
customerList: [],
|
||||
selectedIds: []
|
||||
})
|
||||
|
||||
|
||||
const onSelectChange = selectedRowKeys => {
|
||||
data.selectedIds = selectedRowKeys
|
||||
if (data.selectedIds.length !== 0) {
|
||||
disabled.value = false
|
||||
} else {
|
||||
disabled.value = true
|
||||
}
|
||||
};
|
||||
const onSelectChange = selectedRowKeys => {
|
||||
data.selectedIds = selectedRowKeys
|
||||
if (data.selectedIds.length !== 0) {
|
||||
disabled.value = false
|
||||
} else {
|
||||
disabled.value = true
|
||||
}
|
||||
};
|
||||
|
||||
// 点击搜索
|
||||
const onSearch = () => {
|
||||
getCustomerList()
|
||||
};
|
||||
// 点击搜索
|
||||
const onSearch = () => {
|
||||
getCustomerList()
|
||||
};
|
||||
|
||||
// 点击全部客户
|
||||
const onCustomers = () => {
|
||||
keyWord.value = ''
|
||||
getCustomerList()
|
||||
// 点击全部客户
|
||||
const onCustomers = () => {
|
||||
keyWord.value = ''
|
||||
getCustomerList()
|
||||
}
|
||||
|
||||
// 客户属性
|
||||
let customer = reactive({
|
||||
id: undefined,
|
||||
name: undefined,
|
||||
source: undefined,
|
||||
phone: undefined,
|
||||
email: undefined,
|
||||
industry: undefined,
|
||||
level: undefined,
|
||||
remarks: undefined,
|
||||
region: undefined,
|
||||
address: undefined,
|
||||
status: undefined,
|
||||
});
|
||||
|
||||
// 表格分页
|
||||
let pagination = reactive({
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
total: undefined,
|
||||
})
|
||||
|
||||
const title = ref('');
|
||||
const visible = ref(false);
|
||||
const disabled = ref(true)
|
||||
const operation = ref(0);
|
||||
const customerFormRef = ref();
|
||||
const keyWord = ref('')
|
||||
const visibleMail = ref(false)
|
||||
|
||||
// 点击新建客户
|
||||
const onCreate = () => {
|
||||
title.value = '新建客户'
|
||||
operation.value = 1
|
||||
visible.value = true
|
||||
}
|
||||
|
||||
// 点击客户名称
|
||||
const onEdit = (row) => {
|
||||
title.value = '编辑客户'
|
||||
operation.value = 2
|
||||
let param = { id: row.id }
|
||||
queryCustomerInfo(param).then((res) => {
|
||||
if (res.data.code == 0) {
|
||||
let p = res.data.data
|
||||
customer.id = p.id
|
||||
customer.name = p.name
|
||||
customer.source = p.source
|
||||
customer.phone = p.phone
|
||||
customer.email = p.email
|
||||
customer.industry = p.industry
|
||||
customer.level = p.level
|
||||
customer.remarks = p.remarks
|
||||
customer.region = p.region
|
||||
customer.region = p.region.split(',')
|
||||
customer.address = p.address
|
||||
customer.status = p.status
|
||||
}
|
||||
})
|
||||
visible.value = true
|
||||
}
|
||||
|
||||
// 客户属性
|
||||
let customer = reactive({
|
||||
id: undefined,
|
||||
name: undefined,
|
||||
source: undefined,
|
||||
phone: undefined,
|
||||
email: undefined,
|
||||
industry: undefined,
|
||||
level: undefined,
|
||||
remarks: undefined,
|
||||
region: undefined,
|
||||
address: undefined,
|
||||
status: undefined,
|
||||
});
|
||||
|
||||
// 表格分页
|
||||
let pagination = reactive({
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
total: undefined,
|
||||
})
|
||||
|
||||
const title = ref('');
|
||||
const visible = ref(false);
|
||||
const disabled = ref(true)
|
||||
const operation = ref(0);
|
||||
const customerFormRef = ref();
|
||||
const keyWord = ref('')
|
||||
const visibleMail = ref(false)
|
||||
|
||||
// 点击新建客户
|
||||
const onCreate = () => {
|
||||
title.value = '新建客户'
|
||||
operation.value = 1
|
||||
visible.value = true
|
||||
// 点击保存客户
|
||||
const onSave = () => {
|
||||
customerFormRef.value.validateFields().then(() => {
|
||||
if (customer.region !== undefined) {
|
||||
customer.region = customer.region.toString()
|
||||
}
|
||||
|
||||
// 点击客户名称
|
||||
const onEdit = (row) => {
|
||||
title.value = '编辑客户'
|
||||
operation.value = 2
|
||||
let param = { id: row.id }
|
||||
queryCustomerInfo(param).then((res) => {
|
||||
if (operation.value == 1) {
|
||||
createCustomer(customer).then((res) => {
|
||||
if (res.data.code == 0) {
|
||||
let p = res.data.data
|
||||
customer.id = p.id
|
||||
customer.name = p.name
|
||||
customer.source = p.source
|
||||
customer.phone = p.phone
|
||||
customer.email = p.email
|
||||
customer.industry = p.industry
|
||||
customer.level = p.level
|
||||
customer.remarks = p.remarks
|
||||
customer.region = p.region
|
||||
customer.region = p.region.split(',')
|
||||
customer.address = p.address
|
||||
customer.status = p.status
|
||||
message.success('保存成功')
|
||||
getCustomerList()
|
||||
}
|
||||
})
|
||||
visible.value = true
|
||||
}
|
||||
|
||||
// 点击保存客户
|
||||
const onSave = () => {
|
||||
customerFormRef.value.validateFields().then(() => {
|
||||
if (customer.region !== undefined) {
|
||||
customer.region = customer.region.toString()
|
||||
}
|
||||
if (operation.value == 1) {
|
||||
createCustomer(customer).then((res) => {
|
||||
if (res.data.code == 0) {
|
||||
message.success('保存成功')
|
||||
getCustomerList()
|
||||
}
|
||||
})
|
||||
}
|
||||
if (operation.value == 2) {
|
||||
updateCustomer(customer).then((res) => {
|
||||
if (res.data.code == 0) {
|
||||
message.success('保存成功')
|
||||
getCustomerList()
|
||||
}
|
||||
})
|
||||
}
|
||||
customerFormRef.value.resetFields()
|
||||
visible.value = false;
|
||||
});
|
||||
};
|
||||
|
||||
// 点击删除客户
|
||||
const onDelete = () => {
|
||||
let param = {
|
||||
ids: data.selectedIds
|
||||
}
|
||||
Modal.confirm({
|
||||
title: '确定删除选中的' + data.selectedIds.length + '项吗?',
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
centered: true,
|
||||
cancelText: '取消',
|
||||
okText: '确定',
|
||||
onOk() {
|
||||
deleteCustomer(param).then((res) => {
|
||||
if (res.data.code == 0) {
|
||||
getCustomerList()
|
||||
disabled.value = true
|
||||
message.success('删除成功')
|
||||
}
|
||||
})
|
||||
},
|
||||
onCancel() {
|
||||
console.log('Cancel');
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
// 分页查询客户列表
|
||||
const onPagination = (page) => {
|
||||
pagination.current = page
|
||||
getCustomerList()
|
||||
}
|
||||
|
||||
// 初始化数据
|
||||
onMounted(() => { getCustomerList() })
|
||||
|
||||
const getCustomerList = () => {
|
||||
let param = {
|
||||
name: keyWord.value,
|
||||
pageNum: pagination.current,
|
||||
pageSize: pagination.pageSize,
|
||||
}
|
||||
queryCustomerList(param).then((res) => {
|
||||
if (operation.value == 2) {
|
||||
updateCustomer(customer).then((res) => {
|
||||
if (res.data.code == 0) {
|
||||
pagination.total = res.data.data.total
|
||||
data.customerList = res.data.data.list
|
||||
message.success('保存成功')
|
||||
getCustomerList()
|
||||
}
|
||||
})
|
||||
}
|
||||
customerFormRef.value.resetFields()
|
||||
visible.value = false;
|
||||
});
|
||||
};
|
||||
|
||||
// 导出表格
|
||||
const onExport = () => {
|
||||
customerExport().then((res) => {
|
||||
if (res.data.type == 'application/json') {
|
||||
message.error('导出错误！')
|
||||
} else {
|
||||
let blob = new Blob([res.data], {
|
||||
type: "application/vnd.ms-excel"
|
||||
})
|
||||
let a = document.createElement('a')
|
||||
a.setAttribute("download", "客户信息.xlsx");
|
||||
a.href = window.URL.createObjectURL(blob)
|
||||
a.click()
|
||||
window.URL.revokeObjectURL(a.href)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const mail = reactive({
|
||||
customerName: '',
|
||||
receiver: '',
|
||||
subject: '',
|
||||
content: ''
|
||||
})
|
||||
|
||||
// 点击邮件
|
||||
const onMail = (cname, email) => {
|
||||
mail.customerName = cname
|
||||
mail.receiver = email
|
||||
visibleMail.value = true
|
||||
}
|
||||
|
||||
// 点击发送邮件
|
||||
const onSend = () => {
|
||||
let param = {
|
||||
receiver: mail.receiver,
|
||||
subject: mail.subject,
|
||||
content: mail.content
|
||||
}
|
||||
sendMailToCustomer(param).then((res) => {
|
||||
// 点击删除客户
|
||||
const onDelete = () => {
|
||||
let param = {
|
||||
ids: data.selectedIds
|
||||
}
|
||||
Modal.confirm({
|
||||
title: '确定删除选中的' + data.selectedIds.length + '项吗?',
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
centered: true,
|
||||
cancelText: '取消',
|
||||
okText: '确定',
|
||||
onOk() {
|
||||
deleteCustomer(param).then((res) => {
|
||||
if (res.data.code == 0) {
|
||||
message.success("邮件已发送")
|
||||
}
|
||||
if (res.data.code == 50002) {
|
||||
message.error("邮件发送失败")
|
||||
}
|
||||
if (res.data.code == 50003) {
|
||||
message.warn("邮件服务未开启")
|
||||
getCustomerList()
|
||||
disabled.value = true
|
||||
message.success('删除成功')
|
||||
}
|
||||
})
|
||||
},
|
||||
onCancel() {
|
||||
console.log('Cancel');
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
// 分页查询客户列表
|
||||
const onPagination = (page) => {
|
||||
pagination.current = page
|
||||
getCustomerList()
|
||||
}
|
||||
|
||||
// 初始化数据
|
||||
onMounted(() => { getCustomerList() })
|
||||
|
||||
const getCustomerList = () => {
|
||||
let param = {
|
||||
name: keyWord.value,
|
||||
pageNum: pagination.current,
|
||||
pageSize: pagination.pageSize,
|
||||
}
|
||||
queryCustomerList(param).then((res) => {
|
||||
if (res.data.code == 0) {
|
||||
pagination.total = res.data.data.total
|
||||
data.customerList = res.data.data.list
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 点击取消按钮
|
||||
const onCancel = () => {
|
||||
customerFormRef.value.resetFields()
|
||||
visible.value = false
|
||||
};
|
||||
|
||||
const options = regionData
|
||||
|
||||
const selectedOptions = (value) => {
|
||||
customer.region = value
|
||||
// 导出表格
|
||||
const onExport = () => {
|
||||
customerExport().then((res) => {
|
||||
if (res.data.type == 'application/json') {
|
||||
message.error('导出错误！')
|
||||
} else {
|
||||
let blob = new Blob([res.data], {
|
||||
type: "application/vnd.ms-excel"
|
||||
})
|
||||
let a = document.createElement('a')
|
||||
a.setAttribute("download", "客户信息.xlsx");
|
||||
a.href = window.URL.createObjectURL(blob)
|
||||
a.click()
|
||||
window.URL.revokeObjectURL(a.href)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
return {
|
||||
data,
|
||||
columns,
|
||||
rules,
|
||||
onSearch,
|
||||
visible,
|
||||
disabled,
|
||||
onSelectChange,
|
||||
onSearch,
|
||||
customer,
|
||||
title,
|
||||
visible,
|
||||
operation,
|
||||
onCustomers,
|
||||
onCreate,
|
||||
onEdit,
|
||||
customerFormRef,
|
||||
onSave,
|
||||
onCancel,
|
||||
onDelete,
|
||||
getCustomerList,
|
||||
onExport,
|
||||
keyWord,
|
||||
options,
|
||||
onPagination,
|
||||
pagination,
|
||||
selectedOptions,
|
||||
mail,
|
||||
visibleMail,
|
||||
onMail,
|
||||
onSend
|
||||
};
|
||||
},
|
||||
const mail = reactive({
|
||||
customerName: '',
|
||||
receiver: '',
|
||||
subject: '',
|
||||
content: ''
|
||||
})
|
||||
|
||||
// 点击邮件
|
||||
const onMail = (cname, email) => {
|
||||
mail.customerName = cname
|
||||
mail.receiver = email
|
||||
visibleMail.value = true
|
||||
}
|
||||
|
||||
// 点击发送邮件
|
||||
const onSend = () => {
|
||||
let param = {
|
||||
receiver: mail.receiver,
|
||||
subject: mail.subject,
|
||||
content: mail.content
|
||||
}
|
||||
sendMailToCustomer(param).then((res) => {
|
||||
if (res.data.code == 0) {
|
||||
message.success("邮件已发送")
|
||||
}
|
||||
if (res.data.code == 50002) {
|
||||
message.error("邮件发送失败")
|
||||
}
|
||||
if (res.data.code == 50003) {
|
||||
message.warn("邮件服务未开启")
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 点击取消按钮
|
||||
const onCancel = () => {
|
||||
customerFormRef.value.resetFields()
|
||||
visible.value = false
|
||||
};
|
||||
|
||||
const options = regionData
|
||||
|
||||
const selectedOptions = (value) => {
|
||||
customer.region = value
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
+101
-116
@@ -102,7 +102,7 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup>
|
||||
import { QuestionCircleTwoTone } from '@ant-design/icons-vue'
|
||||
import * as echarts from "echarts";
|
||||
import { reactive, ref, onBeforeMount } from 'vue';
|
||||
@@ -110,126 +110,111 @@ import { getSummary } from "../api/dashboard";
|
||||
import { getSubscribeInfo } from '../api/subscribe';
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
QuestionCircleTwoTone
|
||||
},
|
||||
setup() {
|
||||
const daysRange = ref(7);
|
||||
|
||||
const daysRange = ref(7);
|
||||
const router = useRouter()
|
||||
|
||||
const router = useRouter()
|
||||
const data = reactive({
|
||||
customers: 0,
|
||||
contracts: 0,
|
||||
contractAmount: 0.00,
|
||||
products: 0,
|
||||
})
|
||||
|
||||
const data = reactive({
|
||||
customers: 0,
|
||||
contracts: 0,
|
||||
contractAmount: 0.00,
|
||||
products: 0,
|
||||
})
|
||||
onBeforeMount(() => {
|
||||
subscribeInfo();
|
||||
initChart();
|
||||
});
|
||||
|
||||
onBeforeMount(() => {
|
||||
subscribeInfo();
|
||||
initChart();
|
||||
});
|
||||
|
||||
const initChart = () => {
|
||||
let param = {
|
||||
daysRange: daysRange.value
|
||||
}
|
||||
getSummary(param).then((res) => {
|
||||
if (res.data.code == 0) {
|
||||
data.customers = res.data.data.customers
|
||||
data.contracts = res.data.data.contracts
|
||||
data.contractAmount = res.data.data.contractAmount
|
||||
data.products = res.data.data.products
|
||||
echarts.init(document.getElementById("contract")).setOption({
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: res.data.data.date,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['实际完成金额'],
|
||||
orient: 'vertical',
|
||||
bottom: 10,
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '实际完成金额',
|
||||
data: res.data.data.amount,
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
width: 3
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
echarts.init(document.getElementById("customer")).setOption({
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
top: 'bottom',
|
||||
left: 'center',
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
bottom: '15%',
|
||||
radius: ['40%', '70%'],
|
||||
avoidLabelOverlap: false,
|
||||
itemStyle: {
|
||||
borderRadius: 10,
|
||||
borderColor: '#fff',
|
||||
borderWidth: 2,
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: 25,
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: res.data.data.customerIndustry,
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 获取用户订阅信息
|
||||
const subscribeInfo = () => {
|
||||
getSubscribeInfo().then((res) => {
|
||||
if (res.data.code == 0 && res.data.data.version == 1) {
|
||||
router.push('/result')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
return {
|
||||
data,
|
||||
daysRange,
|
||||
initChart,
|
||||
subscribeInfo,
|
||||
}
|
||||
const initChart = () => {
|
||||
let param = {
|
||||
daysRange: daysRange.value
|
||||
}
|
||||
getSummary(param).then((res) => {
|
||||
if (res.data.code == 0) {
|
||||
data.customers = res.data.data.customers
|
||||
data.contracts = res.data.data.contracts
|
||||
data.contractAmount = res.data.data.contractAmount
|
||||
data.products = res.data.data.products
|
||||
echarts.init(document.getElementById("contract")).setOption({
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: res.data.data.date,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['实际完成金额'],
|
||||
orient: 'vertical',
|
||||
bottom: 10,
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '实际完成金额',
|
||||
data: res.data.data.amount,
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
width: 3
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
echarts.init(document.getElementById("customer")).setOption({
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
top: 'bottom',
|
||||
left: 'center',
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
bottom: '15%',
|
||||
radius: ['40%', '70%'],
|
||||
avoidLabelOverlap: false,
|
||||
itemStyle: {
|
||||
borderRadius: 10,
|
||||
borderColor: '#fff',
|
||||
borderWidth: 2,
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: 25,
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: res.data.data.customerIndustry,
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 获取用户订阅信息
|
||||
const subscribeInfo = () => {
|
||||
getSubscribeInfo().then((res) => {
|
||||
if (res.data.code == 0 && res.data.data.version == 1) {
|
||||
router.push('/result')
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
+3
-10
@@ -8,18 +8,11 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup>
|
||||
import router from '../router/index';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const refresh = () => {
|
||||
router.push('/')
|
||||
}
|
||||
return {
|
||||
refresh
|
||||
}
|
||||
}
|
||||
const refresh = () => {
|
||||
router.push('/')
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
+290
-328
@@ -1,105 +1,109 @@
|
||||
<template>
|
||||
<a-layout has-sider>
|
||||
<a-layout-sider class="layout-sider" width="150">
|
||||
<div class="logo">
|
||||
<div><img src="../assets/logo.svg" style="width: 32px;height: 32px;filter: drop-shadow(2px 2px 6px #79bbff);" />
|
||||
</div>
|
||||
<div v-if="collapsed == false" class="title"><b>Z</b>O<b style="color: #1283FF;">C</b>RM</div>
|
||||
</div>
|
||||
<a-menu style="border-right: none;width: 149px;" v-model:selectedKeys="selectedKeys" mode="inline">
|
||||
<a-menu-item :key="item.key" v-for="item in menuItem">
|
||||
<router-link :to="item.to" @click="store.selectedKeys = item.key" replace>
|
||||
<component :is="item.icon" />
|
||||
<span>{{ item.name }}</span>
|
||||
</router-link>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</a-layout-sider>
|
||||
<a-layout :style="{ marginLeft: '150px', background: '#FAFAFA' }">
|
||||
<a-layout-header class="header">
|
||||
<div style="display: flex;align-items: center;justify-items: center;margin-right: 10px;">
|
||||
<QuestionCircleFilled @click="toDocs"
|
||||
style="color: #909399;font-size: 18px;margin: 2px 15px 0 0;cursor: pointer;" />
|
||||
<a-popover placement="bottomRight" :overlayStyle="{ width: '320px' }" trigger="click">
|
||||
<template #content>
|
||||
<div style="max-height: 250px;overflow-y: scroll;">
|
||||
<a-list item-layout="horizontal" :data-source="data.noticeList" size="small">
|
||||
<template #renderItem="{ item }">
|
||||
<a-list-item style="cursor: pointer;" @click="onReadNotice(item.id)">
|
||||
<div style="display: inline-flex;align-items: center;">
|
||||
<a-avatar shape="square" :size="20" v-if="item.status == 1">
|
||||
<template #icon>
|
||||
<BellFilled style="font-size: 18px;" />
|
||||
</template>
|
||||
</a-avatar>
|
||||
<a-avatar shape="square" style="color: #476FFF; background-color: #ccd6fa" :size="20" v-else>
|
||||
<template #icon>
|
||||
<BellFilled style="font-size: 18px;" />
|
||||
</template>
|
||||
</a-avatar>
|
||||
<div v-if="item.status == 1" style="color: #717171;"> {{ item.content }}</div>
|
||||
<div v-else> {{ item.content }}</div>
|
||||
</div>
|
||||
<template #actions>
|
||||
<span v-if="item.status == 2" style="color: black;">{{ formatDate(item.created) }}</span>
|
||||
<span v-else>{{ formatDate(item.created) }}</span>
|
||||
</template>
|
||||
</a-list-item>
|
||||
</template>
|
||||
</a-list>
|
||||
</div>
|
||||
<div style="margin-top: 10px;display: flex;align-items: center;justify-content: center;">
|
||||
<a-button v-if="data.noticeList.length != 0" @click="onDeleteNotice" type="primary" style="width: 92%;"
|
||||
shape="round">清空全部 {{ data.noticeList.length }} 条通知</a-button>
|
||||
</div>
|
||||
</template>
|
||||
<a-badge :count="data.noticeCount">
|
||||
<BellFilled style="color: #909399; font-size: 20px;cursor: pointer;" @click="onNotice" />
|
||||
</a-badge>
|
||||
</a-popover>
|
||||
<a-dropdown :trigger="['click']">
|
||||
<a-avatar @click="onUserAvatar" class="avatar" :size="28">U</a-avatar>
|
||||
<template #overlay>
|
||||
<a-menu style="width: 120px;">
|
||||
<a-menu-item @click="visible = true">
|
||||
<ExclamationCircleOutlined /> 注销账号
|
||||
<a-layout has-sider>
|
||||
<a-layout-sider class="layout-sider" width="150">
|
||||
<div class="logo">
|
||||
<div><img src="../assets/logo.svg"
|
||||
style="width: 32px;height: 32px;filter: drop-shadow(2px 2px 6px #79bbff);" /></div>
|
||||
<div v-if="collapsed == false" class="title"><b>Z</b>O<b style="color: #1283FF;">C</b>RM</div>
|
||||
</div>
|
||||
<a-menu style="border-right: none;width: 149px;" v-model:selectedKeys="selectedKeys" mode="inline">
|
||||
<a-menu-item :key="item.key" v-for="item in menuItem">
|
||||
<router-link :to="item.to" @click="store.selectedKeys = item.key" replace>
|
||||
<component :is="item.icon" />
|
||||
<span>{{ item.name }}</span>
|
||||
</router-link>
|
||||
</a-menu-item>
|
||||
<a-menu-item @click="onLogout">
|
||||
<LogoutOutlined /> 退出登录
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</div>
|
||||
<!-- 注销账号弹出框 -->
|
||||
<a-modal v-model:visible="visible" title="注销账号" @ok="onConfirm" @cancel="onCancel" cancelText="取消" okText="注销"
|
||||
width="400px" :centered="true">
|
||||
<a-alert message="账号注销后，会清空账号相关的所有数据。" type="warning" show-icon /><br />
|
||||
<a-form :model="user" layout="vertical" @finish="onSubmit" :rules="rules">
|
||||
<a-form-item name="email">
|
||||
<a-input v-model:value="user.email" placeholder="邮箱" disabled />
|
||||
</a-form-item>
|
||||
<a-form-item name="code">
|
||||
<a-input v-model:value="user.code" style="width: 55%;" placeholder="验证码" />
|
||||
<a-button @click="onGetCode" style="width: 40%;float: right;" :loading="loading" :disabled="disabled">
|
||||
{{ buttonText }}</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
</a-layout-header>
|
||||
<a-layout-content
|
||||
:style="{ margin: '10px', background: '#fff', overflow: 'initial', borderRadius: '5px' }">
|
||||
<transition name="fade">
|
||||
<router-view v-slot="{ Component }">
|
||||
<component :is="Component" />
|
||||
</router-view>
|
||||
</transition>
|
||||
</a-layout-content>
|
||||
</a-menu>
|
||||
</a-layout-sider>
|
||||
<a-layout :style="{ marginLeft: '150px', background: '#FAFAFA' }">
|
||||
<a-layout-header class="header">
|
||||
<div style="display: flex;align-items: center;justify-items: center;margin-right: 10px;">
|
||||
<QuestionCircleFilled @click="toDocs"
|
||||
style="color: #909399;font-size: 18px;margin: 2px 15px 0 0;cursor: pointer;" />
|
||||
<a-popover placement="bottomRight" :overlayStyle="{ width: '320px' }" trigger="click">
|
||||
<template #content>
|
||||
<div style="max-height: 250px;overflow-y: scroll;">
|
||||
<a-list item-layout="horizontal" :data-source="data.noticeList" size="small">
|
||||
<template #renderItem="{ item }">
|
||||
<a-list-item style="cursor: pointer;" @click="onReadNotice(item.id)">
|
||||
<div style="display: inline-flex;align-items: center;">
|
||||
<a-avatar shape="square" :size="20" v-if="item.status == 1">
|
||||
<template #icon>
|
||||
<BellFilled style="font-size: 18px;" />
|
||||
</template>
|
||||
</a-avatar>
|
||||
<a-avatar shape="square"
|
||||
style="color: #476FFF; background-color: #ccd6fa" :size="20" v-else>
|
||||
<template #icon>
|
||||
<BellFilled style="font-size: 18px;" />
|
||||
</template>
|
||||
</a-avatar>
|
||||
<div v-if="item.status == 1" style="color: #717171;">
|
||||
{{ item.content }}</div>
|
||||
<div v-else> {{ item.content }}</div>
|
||||
</div>
|
||||
<template #actions>
|
||||
<span v-if="item.status == 2" style="color: black;">{{
|
||||
formatDate(item.created)
|
||||
}}</span>
|
||||
<span v-else>{{ formatDate(item.created) }}</span>
|
||||
</template>
|
||||
</a-list-item>
|
||||
</template>
|
||||
</a-list>
|
||||
</div>
|
||||
<div style="margin-top: 10px;display: flex;align-items: center;justify-content: center;">
|
||||
<a-button v-if="data.noticeList.length != 0" @click="onDeleteNotice" type="primary"
|
||||
style="width: 92%;" shape="round">清空全部 {{ data.noticeList.length }} 条通知</a-button>
|
||||
</div>
|
||||
</template>
|
||||
<a-badge :count="data.noticeCount">
|
||||
<BellFilled style="color: #909399; font-size: 20px;cursor: pointer;" @click="onNotice" />
|
||||
</a-badge>
|
||||
</a-popover>
|
||||
<a-dropdown :trigger="['click']">
|
||||
<a-avatar @click="onUserAvatar" class="avatar" :size="28">U</a-avatar>
|
||||
<template #overlay>
|
||||
<a-menu style="width: 120px;">
|
||||
<a-menu-item @click="visible = true">
|
||||
<ExclamationCircleOutlined /> 注销账号
|
||||
</a-menu-item>
|
||||
<a-menu-item @click="onLogout">
|
||||
<LogoutOutlined /> 退出登录
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</div>
|
||||
<!-- 注销账号弹出框 -->
|
||||
<a-modal v-model:visible="visible" title="注销账号" @ok="onConfirm" @cancel="onCancel" cancelText="取消"
|
||||
okText="注销" width="400px" :centered="true">
|
||||
<a-alert message="账号注销后，会清空账号相关的所有数据。" type="warning" show-icon /><br />
|
||||
<a-form :model="user" layout="vertical" @finish="onSubmit" :rules="rules">
|
||||
<a-form-item name="email">
|
||||
<a-input v-model:value="user.email" placeholder="邮箱" disabled />
|
||||
</a-form-item>
|
||||
<a-form-item name="code">
|
||||
<a-input v-model:value="user.code" style="width: 55%;" placeholder="验证码" />
|
||||
<a-button @click="onGetCode" style="width: 40%;float: right;" :loading="loading"
|
||||
:disabled="disabled">
|
||||
{{ buttonText }}</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
</a-layout-header>
|
||||
<a-layout-content :style="{ margin: '10px', background: '#fff', overflow: 'initial', borderRadius: '5px' }">
|
||||
<transition name="fade">
|
||||
<router-view v-slot="{ Component }">
|
||||
<component :is="Component" />
|
||||
</router-view>
|
||||
</transition>
|
||||
</a-layout-content>
|
||||
</a-layout>
|
||||
</a-layout>
|
||||
</a-layout>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup>
|
||||
import { reactive, ref, onBeforeMount } from 'vue';
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useStore } from '../store/index';
|
||||
@@ -110,312 +114,270 @@ import { DashboardOutlined, SmileOutlined, MehOutlined, ShoppingOutlined, Profil
|
||||
import { QuestionCircleFilled, BellFilled, ExclamationCircleOutlined, LogoutOutlined } from '@ant-design/icons-vue';
|
||||
import moment from 'moment'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
DashboardOutlined,
|
||||
SmileOutlined,
|
||||
MehOutlined,
|
||||
ShoppingOutlined,
|
||||
ProfileOutlined,
|
||||
CrownOutlined,
|
||||
QuestionCircleFilled,
|
||||
BellFilled,
|
||||
ExclamationCircleOutlined,
|
||||
LogoutOutlined
|
||||
},
|
||||
setup() {
|
||||
// 菜单选项
|
||||
const menuItem = reactive([{
|
||||
key: "dashboard",
|
||||
to: "/dashboard",
|
||||
icon: "dashboard-outlined",
|
||||
name: "仪表盘"
|
||||
}, {
|
||||
key: "customer",
|
||||
to: "/customer",
|
||||
icon: "smile-outlined",
|
||||
name: "客户"
|
||||
}, {
|
||||
key: "contract",
|
||||
to: "/contract",
|
||||
icon: "meh-outlined",
|
||||
name: "合同"
|
||||
}, {
|
||||
key: "product",
|
||||
to: "/product",
|
||||
icon: "shopping-outlined",
|
||||
name: "产品"
|
||||
}, {
|
||||
key: "config",
|
||||
to: "/config",
|
||||
icon: "profile-outlined",
|
||||
name: "配置"
|
||||
}, {
|
||||
key: "subscribe",
|
||||
to: "/subscribe",
|
||||
icon: "crown-outlined",
|
||||
name: "订阅"
|
||||
}])
|
||||
// 菜单选项
|
||||
const menuItem = reactive([{
|
||||
key: "dashboard",
|
||||
to: "/dashboard",
|
||||
icon: DashboardOutlined,
|
||||
name: "仪表盘"
|
||||
}, {
|
||||
key: "customer",
|
||||
to: "/customer",
|
||||
icon: SmileOutlined,
|
||||
name: "客户"
|
||||
}, {
|
||||
key: "contract",
|
||||
to: "/contract",
|
||||
icon: MehOutlined,
|
||||
name: "合同"
|
||||
}, {
|
||||
key: "product",
|
||||
to: "/product",
|
||||
icon: ShoppingOutlined,
|
||||
name: "产品"
|
||||
}, {
|
||||
key: "config",
|
||||
to: "/config",
|
||||
icon: ProfileOutlined,
|
||||
name: "配置"
|
||||
}, {
|
||||
key: "subscribe",
|
||||
to: "/subscribe",
|
||||
icon: CrownOutlined,
|
||||
name: "订阅"
|
||||
}])
|
||||
|
||||
// 表单校验
|
||||
const rules = {
|
||||
email: [{
|
||||
// 表单校验
|
||||
const rules = {
|
||||
email: [{
|
||||
required: true,
|
||||
message: '请输入邮箱!',
|
||||
trigger: 'blur',
|
||||
}, {
|
||||
}, {
|
||||
pattern: /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/,
|
||||
message: '邮箱格式不正确',
|
||||
trigger: 'blur',
|
||||
}],
|
||||
code: [{ required: true, message: '请输入验证码!' }],
|
||||
};
|
||||
}],
|
||||
code: [{ required: true, message: '请输入验证码!' }],
|
||||
};
|
||||
|
||||
const store = useStore();
|
||||
const store = useStore();
|
||||
|
||||
const selectedKeys = ref([store.selectedKeys])
|
||||
const collapsed = ref(false)
|
||||
const selectedKeys = ref([store.selectedKeys])
|
||||
const collapsed = ref(false)
|
||||
|
||||
const data = reactive({
|
||||
noticeCount: 0,
|
||||
noticeList: []
|
||||
})
|
||||
const data = reactive({
|
||||
noticeCount: 0,
|
||||
noticeList: []
|
||||
})
|
||||
|
||||
store.$subscribe((mutation, state) => {
|
||||
selectedKeys.value = [state.selectedKeys]
|
||||
})
|
||||
store.$subscribe((mutation, state) => {
|
||||
selectedKeys.value = [state.selectedKeys]
|
||||
})
|
||||
|
||||
const router = useRouter()
|
||||
const router = useRouter()
|
||||
|
||||
const user = reactive({
|
||||
name: undefined,
|
||||
email: undefined,
|
||||
verison: undefined,
|
||||
code: undefined,
|
||||
versionText: undefined
|
||||
})
|
||||
const user = reactive({
|
||||
name: undefined,
|
||||
email: undefined,
|
||||
verison: undefined,
|
||||
code: undefined,
|
||||
versionText: undefined
|
||||
})
|
||||
|
||||
const visible = ref(false)
|
||||
const visibleLogo = ref(false)
|
||||
const loading = ref(false)
|
||||
const disabled = ref(false)
|
||||
const buttonText = ref('获取验证码')
|
||||
const visible = ref(false)
|
||||
const visibleLogo = ref(false)
|
||||
const loading = ref(false)
|
||||
const disabled = ref(false)
|
||||
const buttonText = ref('获取验证码')
|
||||
|
||||
// 初始化数据
|
||||
onBeforeMount(() => {
|
||||
store.selectedKeys = 'dashboard'
|
||||
router.push('dashboard')
|
||||
noticeCount()
|
||||
})
|
||||
// 初始化数据
|
||||
onBeforeMount(() => {
|
||||
store.selectedKeys = 'dashboard'
|
||||
router.push('dashboard')
|
||||
noticeCount()
|
||||
})
|
||||
|
||||
// 点击用户头像
|
||||
const onUserAvatar = () => {
|
||||
getUserInfo().then((res) => {
|
||||
// 点击用户头像
|
||||
const onUserAvatar = () => {
|
||||
getUserInfo().then((res) => {
|
||||
if (res.data.code == 0) {
|
||||
user.name = res.data.data.name
|
||||
user.email = res.data.data.email
|
||||
user.version = res.data.data.version
|
||||
user.name = res.data.data.name
|
||||
user.email = res.data.data.email
|
||||
user.version = res.data.data.version
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 跳转到项目文档
|
||||
const toDocs = () => {
|
||||
window.open("https://docs.zocrm.cloud")
|
||||
}
|
||||
// 跳转到项目文档
|
||||
const toDocs = () => {
|
||||
window.open("https://docs.zocrm.cloud")
|
||||
}
|
||||
|
||||
// 点击获取验证码
|
||||
const onGetCode = () => {
|
||||
if (user.email == '') {
|
||||
// 点击获取验证码
|
||||
const onGetCode = () => {
|
||||
if (user.email == '') {
|
||||
message.warn('邮箱不能为空')
|
||||
return
|
||||
}
|
||||
loading.value = true
|
||||
let param = {
|
||||
}
|
||||
loading.value = true
|
||||
let param = {
|
||||
email: user.email
|
||||
}
|
||||
getVerifyCode(param).then((res) => {
|
||||
}
|
||||
getVerifyCode(param).then((res) => {
|
||||
if (res.data.code == 0) {
|
||||
loading.value = false
|
||||
disabled.value = true
|
||||
buttonText.value = '验证码已发送'
|
||||
loading.value = false
|
||||
disabled.value = true
|
||||
buttonText.value = '验证码已发送'
|
||||
}
|
||||
if (res.data.code == 10004) {
|
||||
loading.value = false
|
||||
message.error('验证码发送失败')
|
||||
loading.value = false
|
||||
message.error('验证码发送失败')
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 点击确认注销账号
|
||||
const onConfirm = () => {
|
||||
let param = {
|
||||
// 点击确认注销账号
|
||||
const onConfirm = () => {
|
||||
let param = {
|
||||
email: user.email,
|
||||
code: user.code
|
||||
}
|
||||
userDelete(param).then((res) => {
|
||||
if (res.data.code == 0) {
|
||||
router.push('/')
|
||||
message.success('账号已注销')
|
||||
}
|
||||
})
|
||||
}
|
||||
userDelete(param).then((res) => {
|
||||
if (res.data.code == 0) {
|
||||
router.push('/')
|
||||
message.success('账号已注销')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 日期格式化
|
||||
const formatDate = (timeStamp) => {
|
||||
let now = (Date.parse(new Date())) / 1000
|
||||
if (now - timeStamp < 60) {
|
||||
// 日期格式化
|
||||
const formatDate = (timeStamp) => {
|
||||
let now = (Date.parse(new Date())) / 1000
|
||||
if (now - timeStamp < 60) {
|
||||
return "刚刚"
|
||||
}
|
||||
if ((new Date().getDate()) == (new Date(timeStamp * 1000).getDate())) {
|
||||
}
|
||||
if ((new Date().getDate()) == (new Date(timeStamp * 1000).getDate())) {
|
||||
return "今天 " + moment(timeStamp * 1000).format('HH:mm')
|
||||
}
|
||||
return moment(timeStamp * 1000).format('YYYY-MM-DD')
|
||||
}
|
||||
return moment(timeStamp * 1000).format('YYYY-MM-DD')
|
||||
}
|
||||
|
||||
// 点击读取通知
|
||||
const onReadNotice = (id) => {
|
||||
updateNotice({ id: id }).then((res) => {
|
||||
// 点击读取通知
|
||||
const onReadNotice = (id) => {
|
||||
updateNotice({ id: id }).then((res) => {
|
||||
if (res.data.code == 0) {
|
||||
onNotice()
|
||||
noticeCount()
|
||||
onNotice()
|
||||
noticeCount()
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 获取通知数量
|
||||
const noticeCount = () => {
|
||||
getNoticeCount().then((res) => {
|
||||
// 获取通知数量
|
||||
const noticeCount = () => {
|
||||
getNoticeCount().then((res) => {
|
||||
if (res.data.code == 0) {
|
||||
data.noticeCount = res.data.data.count
|
||||
data.noticeCount = res.data.data.count
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 获取通知列表
|
||||
const onNotice = () => {
|
||||
getNoticeList().then((res) => {
|
||||
// 获取通知列表
|
||||
const onNotice = () => {
|
||||
getNoticeList().then((res) => {
|
||||
if (res.data.code == 0) {
|
||||
data.noticeList = res.data.data
|
||||
data.noticeList = res.data.data
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 删除通知
|
||||
const onDeleteNotice = () => {
|
||||
let ids = []
|
||||
for (let index = 0; index < data.noticeList.length; index++) {
|
||||
// 删除通知
|
||||
const onDeleteNotice = () => {
|
||||
let ids = []
|
||||
for (let index = 0; index < data.noticeList.length; index++) {
|
||||
ids[index] = data.noticeList[index].id
|
||||
}
|
||||
deleteNotice({ ids: ids }).then((res) => {
|
||||
}
|
||||
deleteNotice({ ids: ids }).then((res) => {
|
||||
if (res.data.code == 0) {
|
||||
data.noticeList = res.data.data
|
||||
onNotice()
|
||||
data.noticeList = res.data.data
|
||||
onNotice()
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 点击退出账号
|
||||
const onLogout = () => {
|
||||
localStorage.removeItem("uid")
|
||||
localStorage.removeItem("token")
|
||||
router.push('/')
|
||||
}
|
||||
// 点击退出账号
|
||||
const onLogout = () => {
|
||||
localStorage.removeItem("uid")
|
||||
localStorage.removeItem("token")
|
||||
router.push('/')
|
||||
}
|
||||
|
||||
// 点击取消按钮
|
||||
const onCancel = () => {
|
||||
disabled.value = false
|
||||
modalFormRef.value.resetFields()
|
||||
visible.value = false
|
||||
};
|
||||
|
||||
return {
|
||||
menuItem,
|
||||
rules,
|
||||
selectedKeys,
|
||||
collapsed,
|
||||
user,
|
||||
visible,
|
||||
visibleLogo,
|
||||
loading,
|
||||
disabled,
|
||||
buttonText,
|
||||
onUserAvatar,
|
||||
onLogout,
|
||||
onGetCode,
|
||||
onConfirm,
|
||||
onNotice,
|
||||
onReadNotice,
|
||||
noticeCount,
|
||||
onDeleteNotice,
|
||||
onCancel,
|
||||
store,
|
||||
formatDate,
|
||||
data,
|
||||
toDocs
|
||||
};
|
||||
},
|
||||
// 点击取消按钮
|
||||
const onCancel = () => {
|
||||
disabled.value = false
|
||||
modalFormRef.value.resetFields()
|
||||
visible.value = false
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.layout-sider {
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
overflow: auto;
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
background: #fff;
|
||||
border-right: 0.5px solid #F0F2F5;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
overflow: auto;
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
background: #fff;
|
||||
border-right: 0.5px solid #F0F2F5;
|
||||
}
|
||||
|
||||
.header {
|
||||
padding: 0 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
background: #fff;
|
||||
padding: 0 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.trigger {
|
||||
font-size: 18px;
|
||||
padding: 0 8px;
|
||||
cursor: pointer;
|
||||
transition: color 0.3s;
|
||||
font-size: 18px;
|
||||
padding: 0 8px;
|
||||
cursor: pointer;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
.trigger:hover {
|
||||
color: #476FFF;
|
||||
color: #476FFF;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 32px;
|
||||
margin: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 32px;
|
||||
margin: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
color: #f56a00;
|
||||
background-color: #fde3cf;
|
||||
cursor: pointer;
|
||||
margin-left: 20px;
|
||||
color: #f56a00;
|
||||
background-color: #fde3cf;
|
||||
cursor: pointer;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.popover {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 10px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 20px;
|
||||
color: rgba(31, 31, 31, 0.85);
|
||||
font-weight: 620;
|
||||
margin-left: 10px;
|
||||
overflow: hidden;
|
||||
font-size: 20px;
|
||||
color: rgba(31, 31, 31, 0.85);
|
||||
font-weight: 620;
|
||||
margin-left: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
@@ -24,10 +24,8 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
<script setup>
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
+54
-71
@@ -31,7 +31,7 @@
|
||||
</a-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup>
|
||||
import { reactive } from 'vue';
|
||||
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue';
|
||||
import { useRouter } from 'vue-router'
|
||||
@@ -39,79 +39,62 @@ import { userLogin } from '../api/user';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { initData } from '../api/common';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
UserOutlined,
|
||||
LockOutlined,
|
||||
},
|
||||
setup() {
|
||||
const router = useRouter()
|
||||
const router = useRouter()
|
||||
|
||||
// 用户登录
|
||||
const formData = reactive({
|
||||
email: '1655064994@qq.com',
|
||||
password: '1655064994',
|
||||
remember: true,
|
||||
});
|
||||
const onLogin = () => {
|
||||
let param = {
|
||||
email: formData.email,
|
||||
password: formData.password
|
||||
}
|
||||
// 初始化数据
|
||||
if (formData.email == '1655064994@qq.com') {
|
||||
initSysData()
|
||||
}
|
||||
userLogin(param).then((res) => {
|
||||
if (res.data.code == 0) {
|
||||
localStorage.setItem('uid', res.data.data.uid)
|
||||
localStorage.setItem('token', res.data.data.token)
|
||||
router.push("/home")
|
||||
}
|
||||
if (res.data.code == 10002) {
|
||||
message.error('用户不存在');
|
||||
}
|
||||
if (res.data.code == 10003) {
|
||||
message.error('用户名或密码错误');
|
||||
}
|
||||
})
|
||||
};
|
||||
const onLoginFailed = errorInfo => {
|
||||
console.log('Failed:', errorInfo);
|
||||
};
|
||||
|
||||
// 忘记密码
|
||||
const forgotPass = () => {
|
||||
router.push("/pass")
|
||||
}
|
||||
|
||||
// 用户注册
|
||||
const toRegister = () => {
|
||||
router.push("/register")
|
||||
}
|
||||
|
||||
// 初始化数据（只会在生产环境中初始化）
|
||||
const initSysData = () => {
|
||||
initData().then((res) => {
|
||||
if (res.data.code == 10) {
|
||||
message.success('初始化数据成功！')
|
||||
}
|
||||
if (res.data.code == 11) {
|
||||
message.error('初始化数据失败！')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
return {
|
||||
formData,
|
||||
onLogin,
|
||||
onLoginFailed,
|
||||
forgotPass,
|
||||
toRegister,
|
||||
initSysData,
|
||||
};
|
||||
// 用户登录
|
||||
const formData = reactive({
|
||||
email: '1655064994@qq.com',
|
||||
password: '1655064994',
|
||||
remember: true,
|
||||
});
|
||||
const onLogin = () => {
|
||||
let param = {
|
||||
email: formData.email,
|
||||
password: formData.password
|
||||
}
|
||||
// 初始化数据
|
||||
if (formData.email == '1655064994@qq.com') {
|
||||
initSysData()
|
||||
}
|
||||
userLogin(param).then((res) => {
|
||||
if (res.data.code == 0) {
|
||||
localStorage.setItem('uid', res.data.data.uid)
|
||||
localStorage.setItem('token', res.data.data.token)
|
||||
router.push("/home")
|
||||
}
|
||||
if (res.data.code == 10002) {
|
||||
message.error('用户不存在');
|
||||
}
|
||||
if (res.data.code == 10003) {
|
||||
message.error('用户名或密码错误');
|
||||
}
|
||||
})
|
||||
};
|
||||
const onLoginFailed = errorInfo => {
|
||||
console.log('Failed:', errorInfo);
|
||||
};
|
||||
|
||||
// 忘记密码
|
||||
const forgotPass = () => {
|
||||
router.push("/pass")
|
||||
}
|
||||
|
||||
// 用户注册
|
||||
const toRegister = () => {
|
||||
router.push("/register")
|
||||
}
|
||||
|
||||
// 初始化数据（只会在生产环境中初始化）
|
||||
const initSysData = () => {
|
||||
initData().then((res) => {
|
||||
if (res.data.code == 10) {
|
||||
message.success('初始化数据成功！')
|
||||
}
|
||||
if (res.data.code == 11) {
|
||||
message.error('初始化数据失败！')
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
+68
-84
@@ -22,103 +22,87 @@
|
||||
</a-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { userForgotPass, getVerifyCode } from '../api/user'
|
||||
import { message } from 'ant-design-vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const router = useRouter()
|
||||
const router = useRouter()
|
||||
|
||||
// 重置密码
|
||||
const formData = reactive({
|
||||
email: '',
|
||||
code: '',
|
||||
password1: '',
|
||||
password2: '',
|
||||
});
|
||||
// 重置密码
|
||||
const formData = reactive({
|
||||
email: '',
|
||||
code: '',
|
||||
password1: '',
|
||||
password2: '',
|
||||
});
|
||||
|
||||
// 表单校验
|
||||
const rules = {
|
||||
email: [{
|
||||
required: true,
|
||||
message: '请输入邮箱!'
|
||||
}, {
|
||||
pattern: /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/,
|
||||
message: '邮箱格式不正确',
|
||||
trigger: 'blur',
|
||||
}],
|
||||
code: [{ required: true, message: '请输入验证码!' }],
|
||||
password1: [{ required: true, message: '请输入密码!' }],
|
||||
password2: [{ required: true, message: '请输入密码!' }],
|
||||
};
|
||||
// 表单校验
|
||||
const rules = {
|
||||
email: [{
|
||||
required: true,
|
||||
message: '请输入邮箱!'
|
||||
}, {
|
||||
pattern: /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/,
|
||||
message: '邮箱格式不正确',
|
||||
trigger: 'blur',
|
||||
}],
|
||||
code: [{ required: true, message: '请输入验证码!' }],
|
||||
password1: [{ required: true, message: '请输入密码!' }],
|
||||
password2: [{ required: true, message: '请输入密码!' }],
|
||||
};
|
||||
|
||||
const loading = ref(false)
|
||||
const disabled = ref(false)
|
||||
const passFormRef = ref()
|
||||
const buttonText = ref('获取验证码')
|
||||
const loading = ref(false)
|
||||
const disabled = ref(false)
|
||||
const passFormRef = ref()
|
||||
const buttonText = ref('获取验证码')
|
||||
|
||||
const onSubmit = () => {
|
||||
passFormRef.value.validateFields().then(() => {
|
||||
let param = {
|
||||
email: formData.email,
|
||||
code: formData.code,
|
||||
password: formData.password2,
|
||||
}
|
||||
userForgotPass(param).then((res) => {
|
||||
if (res.data.code == 0) {
|
||||
message.success('密码已重置')
|
||||
router.push("/login")
|
||||
}
|
||||
if (res.data.code == 10005) {
|
||||
message.error('验证码错误');
|
||||
}
|
||||
})
|
||||
})
|
||||
};
|
||||
|
||||
// 获取验证码
|
||||
const onGetCode = () => {
|
||||
if (formData.email == '') {
|
||||
message.warn('邮箱不能为空')
|
||||
return
|
||||
}
|
||||
loading.value = true
|
||||
let param = {
|
||||
email: formData.email
|
||||
}
|
||||
getVerifyCode(param).then((res) => {
|
||||
if (res.data.code == 0) {
|
||||
loading.value = false
|
||||
disabled.value = true
|
||||
buttonText.value = '验证码已发送'
|
||||
}
|
||||
if (res.data.code == 10004) {
|
||||
loading.value = false
|
||||
message.error('验证码发送失败')
|
||||
}
|
||||
})
|
||||
const onSubmit = () => {
|
||||
passFormRef.value.validateFields().then(() => {
|
||||
let param = {
|
||||
email: formData.email,
|
||||
code: formData.code,
|
||||
password: formData.password2,
|
||||
}
|
||||
userForgotPass(param).then((res) => {
|
||||
if (res.data.code == 0) {
|
||||
message.success('密码已重置')
|
||||
router.push("/login")
|
||||
}
|
||||
if (res.data.code == 10005) {
|
||||
message.error('验证码错误');
|
||||
}
|
||||
})
|
||||
})
|
||||
};
|
||||
|
||||
// 跳转到登录页面
|
||||
const onLogin = () => {
|
||||
router.push("/login")
|
||||
// 获取验证码
|
||||
const onGetCode = () => {
|
||||
if (formData.email == '') {
|
||||
message.warn('邮箱不能为空')
|
||||
return
|
||||
}
|
||||
loading.value = true
|
||||
let param = {
|
||||
email: formData.email
|
||||
}
|
||||
getVerifyCode(param).then((res) => {
|
||||
if (res.data.code == 0) {
|
||||
loading.value = false
|
||||
disabled.value = true
|
||||
buttonText.value = '验证码已发送'
|
||||
}
|
||||
if (res.data.code == 10004) {
|
||||
loading.value = false
|
||||
message.error('验证码发送失败')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
return {
|
||||
formData,
|
||||
rules,
|
||||
passFormRef,
|
||||
loading,
|
||||
disabled,
|
||||
buttonText,
|
||||
onSubmit,
|
||||
onGetCode,
|
||||
onLogin,
|
||||
};
|
||||
},
|
||||
// 跳转到登录页面
|
||||
const onLogin = () => {
|
||||
router.push("/login")
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
+205
-238
@@ -107,275 +107,242 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted, createVNode } from 'vue';
|
||||
import { SearchOutlined, ExclamationCircleOutlined, ExportOutlined } from '@ant-design/icons-vue';
|
||||
import moment from 'moment'
|
||||
import { createProduct, updateProduct, queryProductList, deleteProduct, queryProductInfo, productExport } from '../api/product';
|
||||
import { message, Modal } from 'ant-design-vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
SearchOutlined,
|
||||
ExportOutlined
|
||||
},
|
||||
setup() {
|
||||
// 表格字段
|
||||
const columns = [{
|
||||
title: '产品名称',
|
||||
dataIndex: 'name',
|
||||
width: 100,
|
||||
fixed: 'left',
|
||||
ellipsis: true,
|
||||
}, {
|
||||
title: '是否上下架',
|
||||
dataIndex: 'status',
|
||||
width: 120,
|
||||
}, {
|
||||
title: '产品类型',
|
||||
dataIndex: 'type',
|
||||
width: 100,
|
||||
}, {
|
||||
title: '产品单位',
|
||||
dataIndex: 'unit',
|
||||
width: 100,
|
||||
}, {
|
||||
title: '产品编码',
|
||||
dataIndex: 'code',
|
||||
width: 150,
|
||||
}, {
|
||||
title: '价格',
|
||||
dataIndex: 'price',
|
||||
width: 150,
|
||||
}, {
|
||||
title: '产品描述',
|
||||
dataIndex: 'description',
|
||||
width: 240,
|
||||
ellipsis: true,
|
||||
}, {
|
||||
title: '创建时间',
|
||||
dataIndex: 'created',
|
||||
width: 185,
|
||||
customRender: text => {
|
||||
return text.value == 0 ? '' : moment(text.value * 1000).format('YYYY-MM-DD HH:mm:ss')
|
||||
}
|
||||
}, {
|
||||
title: '更新时间',
|
||||
dataIndex: 'updated',
|
||||
width: 185,
|
||||
customRender: text => {
|
||||
return text.value == 0 ? '' : moment(text.value * 1000).format('YYYY-MM-DD HH:mm:ss')
|
||||
}
|
||||
}];
|
||||
// 表格字段
|
||||
const columns = [{
|
||||
title: '产品名称',
|
||||
dataIndex: 'name',
|
||||
width: 100,
|
||||
fixed: 'left',
|
||||
ellipsis: true,
|
||||
}, {
|
||||
title: '是否上下架',
|
||||
dataIndex: 'status',
|
||||
width: 120,
|
||||
}, {
|
||||
title: '产品类型',
|
||||
dataIndex: 'type',
|
||||
width: 100,
|
||||
}, {
|
||||
title: '产品单位',
|
||||
dataIndex: 'unit',
|
||||
width: 100,
|
||||
}, {
|
||||
title: '产品编码',
|
||||
dataIndex: 'code',
|
||||
width: 150,
|
||||
}, {
|
||||
title: '价格',
|
||||
dataIndex: 'price',
|
||||
width: 150,
|
||||
}, {
|
||||
title: '产品描述',
|
||||
dataIndex: 'description',
|
||||
width: 240,
|
||||
ellipsis: true,
|
||||
}, {
|
||||
title: '创建时间',
|
||||
dataIndex: 'created',
|
||||
width: 185,
|
||||
customRender: text => {
|
||||
return text.value == 0 ? '' : moment(text.value * 1000).format('YYYY-MM-DD HH:mm:ss')
|
||||
}
|
||||
}, {
|
||||
title: '更新时间',
|
||||
dataIndex: 'updated',
|
||||
width: 185,
|
||||
customRender: text => {
|
||||
return text.value == 0 ? '' : moment(text.value * 1000).format('YYYY-MM-DD HH:mm:ss')
|
||||
}
|
||||
}];
|
||||
|
||||
// 表单校验
|
||||
const rules = {
|
||||
name: [{ required: true, message: '请输入产品名称', trigger: 'blur' }],
|
||||
type: [{ required: true, message: '请选择产品类型' }],
|
||||
code: [{ pattern: /^\d+$/, message: '产品编码格式不正确', trigger: 'blur' }],
|
||||
price: [{ required: true, message: '请输入产品价格' }],
|
||||
status: [{ required: true, message: '请选择是否上下架' }]
|
||||
};
|
||||
// 表单校验
|
||||
const rules = {
|
||||
name: [{ required: true, message: '请输入产品名称', trigger: 'blur' }],
|
||||
type: [{ required: true, message: '请选择产品类型' }],
|
||||
code: [{ pattern: /^\d+$/, message: '产品编码格式不正确', trigger: 'blur' }],
|
||||
price: [{ required: true, message: '请输入产品价格' }],
|
||||
status: [{ required: true, message: '请选择是否上下架' }]
|
||||
};
|
||||
|
||||
// 产品属性
|
||||
let product = reactive({
|
||||
id: undefined,
|
||||
name: undefined,
|
||||
type: undefined,
|
||||
unit: undefined,
|
||||
code: undefined,
|
||||
price: undefined,
|
||||
status: undefined,
|
||||
description: undefined,
|
||||
});
|
||||
// 产品属性
|
||||
let product = reactive({
|
||||
id: undefined,
|
||||
name: undefined,
|
||||
type: undefined,
|
||||
unit: undefined,
|
||||
code: undefined,
|
||||
price: undefined,
|
||||
status: undefined,
|
||||
description: undefined,
|
||||
});
|
||||
|
||||
// 产品列表
|
||||
const data = reactive({
|
||||
productList: [],
|
||||
selectedIds: []
|
||||
})
|
||||
// 产品列表
|
||||
const data = reactive({
|
||||
productList: [],
|
||||
selectedIds: []
|
||||
})
|
||||
|
||||
// 表格分页
|
||||
let pagination = reactive({
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
total: undefined,
|
||||
})
|
||||
// 表格分页
|
||||
let pagination = reactive({
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
total: undefined,
|
||||
})
|
||||
|
||||
const title = ref('');
|
||||
const visible = ref(false);
|
||||
const disabled = ref(true)
|
||||
const operation = ref(0);
|
||||
const productFormRef = ref();
|
||||
const keyWord = ref('')
|
||||
const title = ref('');
|
||||
const visible = ref(false);
|
||||
const disabled = ref(true)
|
||||
const operation = ref(0);
|
||||
const productFormRef = ref();
|
||||
const keyWord = ref('')
|
||||
|
||||
// 初始化数据
|
||||
onMounted(() => { getProductList() })
|
||||
// 初始化数据
|
||||
onMounted(() => { getProductList() })
|
||||
|
||||
// 表格记录多选
|
||||
const onSelectChange = selectedRowKeys => {
|
||||
data.selectedIds = selectedRowKeys
|
||||
if (data.selectedIds.length !== 0) {
|
||||
disabled.value = false
|
||||
} else {
|
||||
disabled.value = true
|
||||
}
|
||||
};
|
||||
// 表格记录多选
|
||||
const onSelectChange = selectedRowKeys => {
|
||||
data.selectedIds = selectedRowKeys
|
||||
if (data.selectedIds.length !== 0) {
|
||||
disabled.value = false
|
||||
} else {
|
||||
disabled.value = true
|
||||
}
|
||||
};
|
||||
|
||||
// 点击搜索
|
||||
const onSearch = () => { getProductList() };
|
||||
// 点击搜索
|
||||
const onSearch = () => { getProductList() };
|
||||
|
||||
// 点击全部产品
|
||||
const onProducts = () => {
|
||||
keyWord.value = ''
|
||||
getProductList()
|
||||
// 点击全部产品
|
||||
const onProducts = () => {
|
||||
keyWord.value = ''
|
||||
getProductList()
|
||||
}
|
||||
|
||||
// 点击新建产品
|
||||
const onCreate = () => {
|
||||
title.value = '新建产品'
|
||||
operation.value = 1
|
||||
visible.value = true
|
||||
}
|
||||
|
||||
// 点击产品名称
|
||||
const onEdit = (row) => {
|
||||
title.value = '编辑产品'
|
||||
operation.value = 2
|
||||
let param = { id: row.id }
|
||||
queryProductInfo(param).then((res) => {
|
||||
if (res.data.code == 0) {
|
||||
let p = res.data.data
|
||||
product.id = p.id
|
||||
product.name = p.name
|
||||
product.type = p.type
|
||||
product.unit = p.unit
|
||||
product.code = p.code
|
||||
product.price = p.price
|
||||
product.status = p.status
|
||||
product.description = p.description
|
||||
}
|
||||
})
|
||||
visible.value = true
|
||||
}
|
||||
|
||||
// 点击新建产品
|
||||
const onCreate = () => {
|
||||
title.value = '新建产品'
|
||||
operation.value = 1
|
||||
visible.value = true
|
||||
}
|
||||
|
||||
// 点击产品名称
|
||||
const onEdit = (row) => {
|
||||
title.value = '编辑产品'
|
||||
operation.value = 2
|
||||
let param = { id: row.id }
|
||||
queryProductInfo(param).then((res) => {
|
||||
// 点击保存产品
|
||||
const onSave = () => {
|
||||
productFormRef.value.validateFields().then(() => {
|
||||
if (operation.value == 1) {
|
||||
createProduct(product).then((res) => {
|
||||
if (res.data.code == 0) {
|
||||
let p = res.data.data
|
||||
product.id = p.id
|
||||
product.name = p.name
|
||||
product.type = p.type
|
||||
product.unit = p.unit
|
||||
product.code = p.code
|
||||
product.price = p.price
|
||||
product.status = p.status
|
||||
product.description = p.description
|
||||
message.success('保存成功')
|
||||
getProductList()
|
||||
}
|
||||
})
|
||||
visible.value = true
|
||||
}
|
||||
|
||||
// 点击保存产品
|
||||
const onSave = () => {
|
||||
productFormRef.value.validateFields().then(() => {
|
||||
if (operation.value == 1) {
|
||||
createProduct(product).then((res) => {
|
||||
if (res.data.code == 0) {
|
||||
message.success('保存成功')
|
||||
getProductList()
|
||||
}
|
||||
})
|
||||
}
|
||||
if (operation.value == 2) {
|
||||
updateProduct(product).then((res) => {
|
||||
if (res.data.code == 0) {
|
||||
message.success('保存成功')
|
||||
getProductList()
|
||||
}
|
||||
})
|
||||
}
|
||||
productFormRef.value.resetFields()
|
||||
visible.value = false;
|
||||
});
|
||||
};
|
||||
|
||||
// 点击删除产品
|
||||
const onDelete = () => {
|
||||
Modal.confirm({
|
||||
title: '确定删除选中的' + data.selectedIds.length + '项吗?',
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
centered: true,
|
||||
cancelText: '取消',
|
||||
okText: '确定',
|
||||
onOk() {
|
||||
deleteProduct({ ids: data.selectedIds }).then((res) => {
|
||||
if (res.data.code == 0) {
|
||||
getProductList()
|
||||
disabled.value = true
|
||||
message.success('删除成功')
|
||||
}
|
||||
})
|
||||
},
|
||||
onCancel() {
|
||||
console.log('Cancel');
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
// 分页查询产品列表
|
||||
const onPagination = (page) => {
|
||||
pagination.current = page
|
||||
getProductList()
|
||||
}
|
||||
|
||||
// 查询产列表
|
||||
const getProductList = () => {
|
||||
let param = {
|
||||
name: keyWord.value,
|
||||
pageNum: pagination.current,
|
||||
pageSize: pagination.pageSize,
|
||||
}
|
||||
queryProductList(param).then((res) => {
|
||||
if (operation.value == 2) {
|
||||
updateProduct(product).then((res) => {
|
||||
if (res.data.code == 0) {
|
||||
pagination.total = res.data.data.total
|
||||
data.productList = res.data.data.list
|
||||
message.success('保存成功')
|
||||
getProductList()
|
||||
}
|
||||
})
|
||||
}
|
||||
productFormRef.value.resetFields()
|
||||
visible.value = false;
|
||||
});
|
||||
};
|
||||
|
||||
// 导出表格
|
||||
const onExport = () => {
|
||||
productExport().then((res) => {
|
||||
if (res.data.type == 'application/json'){
|
||||
message.error('导出错误！')
|
||||
} else {
|
||||
let blob = new Blob([res.data], {
|
||||
type: "application/vnd.ms-excel"
|
||||
})
|
||||
let a = document.createElement('a')
|
||||
a.setAttribute("download", "产品信息.xlsx");
|
||||
a.href = window.URL.createObjectURL(blob)
|
||||
a.click()
|
||||
window.URL.revokeObjectURL(a.href)
|
||||
// 点击删除产品
|
||||
const onDelete = () => {
|
||||
Modal.confirm({
|
||||
title: '确定删除选中的' + data.selectedIds.length + '项吗?',
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
centered: true,
|
||||
cancelText: '取消',
|
||||
okText: '确定',
|
||||
onOk() {
|
||||
deleteProduct({ ids: data.selectedIds }).then((res) => {
|
||||
if (res.data.code == 0) {
|
||||
getProductList()
|
||||
disabled.value = true
|
||||
message.success('删除成功')
|
||||
}
|
||||
})
|
||||
},
|
||||
onCancel() {
|
||||
console.log('Cancel');
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
// 分页查询产品列表
|
||||
const onPagination = (page) => {
|
||||
pagination.current = page
|
||||
getProductList()
|
||||
}
|
||||
|
||||
// 查询产列表
|
||||
const getProductList = () => {
|
||||
let param = {
|
||||
name: keyWord.value,
|
||||
pageNum: pagination.current,
|
||||
pageSize: pagination.pageSize,
|
||||
}
|
||||
queryProductList(param).then((res) => {
|
||||
if (res.data.code == 0) {
|
||||
pagination.total = res.data.data.total
|
||||
data.productList = res.data.data.list
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 点击取消按钮
|
||||
const onCancel = () => {
|
||||
productFormRef.value.resetFields()
|
||||
visible.value = false
|
||||
};
|
||||
// 导出表格
|
||||
const onExport = () => {
|
||||
productExport().then((res) => {
|
||||
if (res.data.type == 'application/json') {
|
||||
message.error('导出错误！')
|
||||
} else {
|
||||
let blob = new Blob([res.data], {
|
||||
type: "application/vnd.ms-excel"
|
||||
})
|
||||
let a = document.createElement('a')
|
||||
a.setAttribute("download", "产品信息.xlsx");
|
||||
a.href = window.URL.createObjectURL(blob)
|
||||
a.click()
|
||||
window.URL.revokeObjectURL(a.href)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
return {
|
||||
columns,
|
||||
rules,
|
||||
data,
|
||||
onSelectChange,
|
||||
onSearch,
|
||||
product,
|
||||
title,
|
||||
visible,
|
||||
disabled,
|
||||
operation,
|
||||
onProducts,
|
||||
onCreate,
|
||||
onEdit,
|
||||
productFormRef,
|
||||
onSave,
|
||||
onCancel,
|
||||
onDelete,
|
||||
getProductList,
|
||||
onExport,
|
||||
keyWord,
|
||||
pagination,
|
||||
onPagination,
|
||||
};
|
||||
},
|
||||
// 点击取消按钮
|
||||
const onCancel = () => {
|
||||
productFormRef.value.resetFields()
|
||||
visible.value = false
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
+77
-93
@@ -22,111 +22,95 @@
|
||||
</a-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { userRegister, getVerifyCode } from '../api/user';
|
||||
import { message } from 'ant-design-vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const router = useRouter()
|
||||
const router = useRouter()
|
||||
|
||||
// 用户注册
|
||||
const formData = reactive({
|
||||
email: '',
|
||||
code: '',
|
||||
password1: '',
|
||||
password2: '',
|
||||
});
|
||||
// 用户注册
|
||||
const formData = reactive({
|
||||
email: '',
|
||||
code: '',
|
||||
password1: '',
|
||||
password2: '',
|
||||
});
|
||||
|
||||
// 表单校验
|
||||
const rules = {
|
||||
email: [{
|
||||
required: true,
|
||||
message: '请输入邮箱!',
|
||||
trigger: 'blur',
|
||||
}, {
|
||||
pattern: /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/,
|
||||
message: '邮箱格式不正确',
|
||||
trigger: 'blur',
|
||||
}],
|
||||
code: [{ required: true, message: '请输入验证码!' }],
|
||||
password1: [{ required: true, message: '请输入密码!' }],
|
||||
password2: [{ required: true, message: '请输入密码!' }],
|
||||
};
|
||||
// 表单校验
|
||||
const rules = {
|
||||
email: [{
|
||||
required: true,
|
||||
message: '请输入邮箱!',
|
||||
trigger: 'blur',
|
||||
}, {
|
||||
pattern: /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/,
|
||||
message: '邮箱格式不正确',
|
||||
trigger: 'blur',
|
||||
}],
|
||||
code: [{ required: true, message: '请输入验证码!' }],
|
||||
password1: [{ required: true, message: '请输入密码!' }],
|
||||
password2: [{ required: true, message: '请输入密码!' }],
|
||||
};
|
||||
|
||||
const loading = ref(false)
|
||||
const disabled = ref(false)
|
||||
const registerFormRef = ref()
|
||||
const buttonText = ref('获取验证码')
|
||||
const loading = ref(false)
|
||||
const disabled = ref(false)
|
||||
const registerFormRef = ref()
|
||||
const buttonText = ref('获取验证码')
|
||||
|
||||
const onRegister = () => {
|
||||
registerFormRef.value.validateFields().then(() => {
|
||||
if (formData.password1 != formData.password2) {
|
||||
message.warn('密码不一致');
|
||||
return
|
||||
}
|
||||
let param = {
|
||||
email: formData.email,
|
||||
code: formData.code,
|
||||
password: formData.password2,
|
||||
}
|
||||
userRegister(param).then((res) => {
|
||||
if (res.data.code == 0) {
|
||||
message.success('注册成功');
|
||||
onLogin()
|
||||
}
|
||||
if (res.data.code == 10001) {
|
||||
message.warn('该用户已经存在');
|
||||
}
|
||||
if (res.data.code == 10005) {
|
||||
message.error('验证码错误');
|
||||
}
|
||||
})
|
||||
})
|
||||
};
|
||||
|
||||
// 获取验证码
|
||||
const onGetCode = () => {
|
||||
if (formData.email == '') {
|
||||
message.warn('邮箱不能为空')
|
||||
return
|
||||
}
|
||||
loading.value = true
|
||||
let param = {
|
||||
email: formData.email
|
||||
}
|
||||
getVerifyCode(param).then((res) => {
|
||||
if (res.data.code == 0) {
|
||||
loading.value = false
|
||||
disabled.value = true
|
||||
buttonText.value = '验证码已发送'
|
||||
}
|
||||
if (res.data.code == 10004) {
|
||||
loading.value = false
|
||||
message.error('验证码发送失败')
|
||||
}
|
||||
})
|
||||
const onRegister = () => {
|
||||
registerFormRef.value.validateFields().then(() => {
|
||||
if (formData.password1 != formData.password2) {
|
||||
message.warn('密码不一致');
|
||||
return
|
||||
}
|
||||
|
||||
// 跳转到登录页面
|
||||
const onLogin = () => {
|
||||
router.push("/login")
|
||||
let param = {
|
||||
email: formData.email,
|
||||
code: formData.code,
|
||||
password: formData.password2,
|
||||
}
|
||||
userRegister(param).then((res) => {
|
||||
if (res.data.code == 0) {
|
||||
message.success('注册成功');
|
||||
onLogin()
|
||||
}
|
||||
if (res.data.code == 10001) {
|
||||
message.warn('该用户已经存在');
|
||||
}
|
||||
if (res.data.code == 10005) {
|
||||
message.error('验证码错误');
|
||||
}
|
||||
})
|
||||
})
|
||||
};
|
||||
|
||||
return {
|
||||
formData,
|
||||
rules,
|
||||
registerFormRef,
|
||||
loading,
|
||||
disabled,
|
||||
buttonText,
|
||||
onRegister,
|
||||
onLogin,
|
||||
onGetCode,
|
||||
};
|
||||
},
|
||||
// 获取验证码
|
||||
const onGetCode = () => {
|
||||
if (formData.email == '') {
|
||||
message.warn('邮箱不能为空')
|
||||
return
|
||||
}
|
||||
loading.value = true
|
||||
let param = {
|
||||
email: formData.email
|
||||
}
|
||||
getVerifyCode(param).then((res) => {
|
||||
if (res.data.code == 0) {
|
||||
loading.value = false
|
||||
disabled.value = true
|
||||
buttonText.value = '验证码已发送'
|
||||
}
|
||||
if (res.data.code == 10004) {
|
||||
loading.value = false
|
||||
message.error('验证码发送失败')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 跳转到登录页面
|
||||
const onLogin = () => {
|
||||
router.push("/login")
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@@ -8,24 +8,16 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup>
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useStore } from '../store/index';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const router = useRouter()
|
||||
const store = useStore()
|
||||
|
||||
const router = useRouter()
|
||||
const store = useStore()
|
||||
|
||||
const onBuy = () => {
|
||||
store.selectedKeys = 'subscribe'
|
||||
router.push('/subscribe')
|
||||
}
|
||||
return {
|
||||
onBuy
|
||||
}
|
||||
}
|
||||
const onBuy = () => {
|
||||
store.selectedKeys = 'subscribe'
|
||||
router.push('/subscribe')
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
+50
-71
@@ -25,7 +25,8 @@
|
||||
<div class="content">能力不设限，新功能优先体验</div><br />
|
||||
<a-button v-if="version == 1 || version == 3" type="primary" size="large" class="btn-buy"
|
||||
@click="onPay(2)" shape="round" :disabled="disabled">立即购买</a-button>
|
||||
<a-button v-if="version == 2" type="primary" size="large" class="btn-buy" shape="round">{{ expired
|
||||
<a-button v-if="version == 2" type="primary" size="large" class="btn-buy" shape="round">{{
|
||||
expired
|
||||
}} 到期</a-button>
|
||||
<br />
|
||||
<div class="subscribe-list" v-for="item in ['客户管理', '合同管理', '产品管理', '仪表盘可体验30天']">
|
||||
@@ -41,7 +42,8 @@
|
||||
<div class="content">能力不设限，新功能优先体验</div><br />
|
||||
<a-button v-if="version == 1 || version == 2" type="primary" size="large" class="btn-buy"
|
||||
@click="onPay(3)" shape="round" :disabled="disabled">立即购买</a-button>
|
||||
<a-button v-if="version == 3" type="primary" size="large" class="btn-buy" shape="round">{{ expired
|
||||
<a-button v-if="version == 3" type="primary" size="large" class="btn-buy" shape="round">{{
|
||||
expired
|
||||
}} 到期</a-button>
|
||||
<br />
|
||||
<div class="subscribe-list" v-for="item in ['客户管理', '合同管理', '产品管理', '仪表盘可体验365天']">
|
||||
@@ -54,87 +56,64 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup>
|
||||
import { ref, reactive, onBeforeMount } from 'vue';
|
||||
import { CheckCircleFilled } from '@ant-design/icons-vue';
|
||||
import { subscribePay, getSubscribeInfo } from '../api/subscribe';
|
||||
import { useRouter } from 'vue-router'
|
||||
import moment from 'moment'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
CheckCircleFilled
|
||||
},
|
||||
setup() {
|
||||
const router = useRouter()
|
||||
|
||||
const router = useRouter()
|
||||
const version = ref(0)
|
||||
const expired = ref(undefined)
|
||||
const payUrl = ref()
|
||||
const visible = ref(false)
|
||||
const disabled = ref(false)
|
||||
const activedClass = reactive(['card', 'card', 'card'])
|
||||
|
||||
const version = ref(0)
|
||||
const expired = ref(undefined)
|
||||
const payUrl = ref()
|
||||
const visible = ref(false)
|
||||
const disabled = ref(false)
|
||||
const activedClass = reactive(['card', 'card', 'card'])
|
||||
const payResult = ref(false)
|
||||
const title = ref('')
|
||||
const buttonText = ref(undefined)
|
||||
|
||||
const payResult = ref(false)
|
||||
const title = ref('')
|
||||
const buttonText = ref(undefined)
|
||||
const isClick = (index) => {
|
||||
active.value = index
|
||||
}
|
||||
|
||||
const isClick = (index) => {
|
||||
active.value = index
|
||||
}
|
||||
// 初始化数据
|
||||
onBeforeMount(() => { subscribeInfo() })
|
||||
|
||||
// 初始化数据
|
||||
onBeforeMount(() => { subscribeInfo() })
|
||||
|
||||
// 点击支付
|
||||
const onPay = (ver) => {
|
||||
let param = {
|
||||
version: ver
|
||||
}
|
||||
subscribePay(param).then((res) => {
|
||||
if (res.data.code == 0) {
|
||||
visible.value = false
|
||||
payResult.value = true
|
||||
window.open(res.data.data.payUrl, '_self')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 获取用户订阅信息
|
||||
const subscribeInfo = () => {
|
||||
getSubscribeInfo().then((res) => {
|
||||
if (res.data.code == 0) {
|
||||
version.value = res.data.data.version
|
||||
expired.value = moment(res.data.data.expired * 1000).format('YYYY-MM-DD')
|
||||
if (res.data.data.version !== 1) {
|
||||
disabled.value = true
|
||||
}
|
||||
if (res.data.data.version == 1) {
|
||||
activedClass[0] = 'selected-free-card'
|
||||
}
|
||||
if (res.data.data.version == 2 || res.data.data.version == 3) {
|
||||
activedClass[res.data.data.version-1] = 'selected-card'
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
return {
|
||||
version,
|
||||
expired,
|
||||
onPay,
|
||||
payUrl,
|
||||
visible,
|
||||
disabled,
|
||||
payResult,
|
||||
title,
|
||||
activedClass,
|
||||
buttonText,
|
||||
isClick,
|
||||
subscribeInfo,
|
||||
}
|
||||
// 点击支付
|
||||
const onPay = (ver) => {
|
||||
let param = {
|
||||
version: ver
|
||||
}
|
||||
subscribePay(param).then((res) => {
|
||||
if (res.data.code == 0) {
|
||||
visible.value = false
|
||||
payResult.value = true
|
||||
window.open(res.data.data.payUrl, '_self')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 获取用户订阅信息
|
||||
const subscribeInfo = () => {
|
||||
getSubscribeInfo().then((res) => {
|
||||
if (res.data.code == 0) {
|
||||
version.value = res.data.data.version
|
||||
expired.value = moment(res.data.data.expired * 1000).format('YYYY-MM-DD')
|
||||
if (res.data.data.version !== 1) {
|
||||
disabled.value = true
|
||||
}
|
||||
if (res.data.data.version == 1) {
|
||||
activedClass[0] = 'selected-free-card'
|
||||
}
|
||||
if (res.data.data.version == 2 || res.data.data.version == 3) {
|
||||
activedClass[res.data.data.version - 1] = 'selected-card'
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user