admin/LingXi-CRM
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: define setup in script label

Browse Source
This commit is contained in:
zchengo
2023-01-25 18:31:18 +08:00
parent c1a3f31cad
commit 8f8ac3dda0
12 changed files with 1562 additions and 1822 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/views/Contract.vue
+111 -157
View File
@@ -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,132 +179,125 @@ 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 = [{
// 合同表格字段
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 = [{
// 新建或编辑合同，已添加产品表格字段
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 = [{
// 产品表格字段
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,
@@ -312,7 +305,7 @@ export default {
let m = moment(text.value * 1000).format('YYYY-MM-DD HH:mm:ss')
return m == 'Invalid date' ? '' : m
}
}, {
}, {
title: '更新时间',
dataIndex: 'updated',
width: 185,
@@ -320,21 +313,21 @@ export default {
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 = {
// 表单校验
const rules = {
name: [{ required: true, message: '请输入合同名称', trigger: 'blur' }],
cid: [{ required: true, message: '请选择客户', trigger: 'blur' }],
status: [{ required: true, message: '请选择合同状态' }]
};
};
// 合同属性
let contract = reactive({
// 合同属性
let contract = reactive({
id: undefined,
name: undefined,
amount: undefined,
@@ -344,9 +337,9 @@ export default {
remarks: undefined,
status: undefined,
productlist: [],
});
});
const data = reactive({
const data = reactive({
contractId: 0,
contractList: [],
contractIds: [],
@@ -355,35 +348,35 @@ export default {
addedProductList: [],
customerOption: [],
defaultSelectedIds: []
})
})
// 表格分页
let pagination = reactive({
// 表格分页
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 = () => {
// 点击新建合同
const onCreate = () => {
title.value = '新建合同'
operation.value = 1
visible.value = true
}
}
// 点击编辑合同
const onEdit = (row) => {
// 点击编辑合同
const onEdit = (row) => {
title.value = '编辑合同'
operation.value = 2
getCustomerOption()
@@ -405,10 +398,10 @@ export default {
})
data.contractId = row.id
visible.value = true
}
}
// 点击保存合同
const onSave = () => {
// 点击保存合同
const onSave = () => {
contractFormRef.value.validateFields().then(() => {
if (operation.value == 1) {
let param = {
@@ -452,10 +445,10 @@ export default {
contractFormRef.value.resetFields()
visible.value = false;
});
};
};
// 点击删除合同
const onDelete = () => {
// 点击删除合同
const onDelete = () => {
let param = {
ids: data.contractIds
}
@@ -478,23 +471,23 @@ export default {
console.log('Cancel');
},
});
}
}
// 初始化数据
onMounted(() => { getContractList() })
// 初始化数据
onMounted(() => { getContractList() })
// 点击全部合同
const onContracts = () => {
// 点击全部合同
const onContracts = () => {
keyWord.value = ''
getContractList()
}
}
// 分页查询合同列表
const onPagination = (page) => {
// 分页查询合同列表
const onPagination = (page) => {
pagination.current = page
getContractList()
}
const getContractList = () => {
}
const getContractList = () => {
let param = {
id: parseInt(keyWord.value == '' ? '0' : keyWord.value),
pageNum: pagination.current,
@@ -506,10 +499,10 @@ export default {
data.contractList = res.data.data.list
}
})
}
}
// 点击添加产品
const onAddProduct = () => {
// 点击添加产品
const onAddProduct = () => {
let param = {
pageNum: pagination.current,
pageSize: pagination.pageSize
@@ -527,10 +520,10 @@ export default {
}
}
productListVisible.value = true
}
}
// 分页查询产品列表
const onPaginationProduct = (page) => {
// 分页查询产品列表
const onPaginationProduct = (page) => {
pagination.current = page
let param = {
pageNum: pagination.current,
@@ -542,36 +535,36 @@ export default {
data.productList = res.data.data.list
}
})
}
}
// 已选中的合同ID
const onSelectedConteactIds = selectedRowKeys => {
// 已选中的合同ID
const onSelectedConteactIds = selectedRowKeys => {
data.contractIds = selectedRowKeys
if (data.contractIds.length !== 0) {
disabled.value = false
} else {
disabled.value = true
}
};
};
// 已选中的产品ID
const onSelectedProductIds = selectedRowKeys => {
// 已选中的产品ID
const onSelectedProductIds = selectedRowKeys => {
data.productIds = selectedRowKeys
data.defaultSelectedIds = selectedRowKeys
};
};
// 删除选中的产品
const delProduct = (row) => {
// 删除选中的产品
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 = () => {
// 点击确定选中的产品ID
const onConfirm = () => {
console.log("xzx", data.productIds)
let param = {
id: data.contractId,
@@ -583,44 +576,44 @@ export default {
}
})
productListVisible.value = false
}
}
// 查询客户选项
const getCustomerOption = () => {
// 查询客户选项
const getCustomerOption = () => {
queryCustomerOption().then((res) => {
if (res.data.code == 0) {
data.customerOption = res.data.data
console.log("zxxzc", data.customerOption)
}
})
}
}
const changeCustomerOption = (value) => {
const changeCustomerOption = (value) => {
contract.cid.value = value
}
}
// 计算金额
const calculatedAmount = () => {
// 计算金额
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 = () => {
// 点击合同取消按钮
const onCancel = () => {
contractFormRef.value.resetFields()
data.addedProductList = []
data.contractId = undefined
visible.value = false
};
};
// 导出表格
const onExport = () => {
// 导出表格
const onExport = () => {
contractExport().then((res) => {
if (res.data.type == 'application/json'){
if (res.data.type == 'application/json') {
message.error('导出错误！')
} else {
let blob = new Blob([res.data], {
@@ -633,53 +626,14 @@ export default {
window.URL.revokeObjectURL(a.href)
}
})
}
}
// 点击取消产品列表
const onCancelProductList = () => {
// 点击取消产品列表
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,
};
},
}
</script>
web/src/views/Customer.vue
+76 -117
View File
@@ -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,77 +168,71 @@ 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 = [{
// 表格字段
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 = {
// 表单校验
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}$/,
@@ -250,36 +244,36 @@ export default {
message: '邮箱格式不正确',
trigger: 'blur',
}],
};
};
const data = reactive({
const data = reactive({
customerList: [],
selectedIds: []
})
})
const onSelectChange = selectedRowKeys => {
const onSelectChange = selectedRowKeys => {
data.selectedIds = selectedRowKeys
if (data.selectedIds.length !== 0) {
disabled.value = false
} else {
disabled.value = true
}
};
};
// 点击搜索
const onSearch = () => {
// 点击搜索
const onSearch = () => {
getCustomerList()
};
};
// 点击全部客户
const onCustomers = () => {
// 点击全部客户
const onCustomers = () => {
keyWord.value = ''
getCustomerList()
}
}
// 客户属性
let customer = reactive({
// 客户属性
let customer = reactive({
id: undefined,
name: undefined,
source: undefined,
@@ -291,32 +285,32 @@ export default {
region: undefined,
address: undefined,
status: undefined,
});
});
// 表格分页
let pagination = reactive({
// 表格分页
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 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 = () => {
// 点击新建客户
const onCreate = () => {
title.value = '新建客户'
operation.value = 1
visible.value = true
}
}
// 点击客户名称
const onEdit = (row) => {
// 点击客户名称
const onEdit = (row) => {
title.value = '编辑客户'
operation.value = 2
let param = { id: row.id }
@@ -338,10 +332,10 @@ export default {
}
})
visible.value = true
}
}
// 点击保存客户
const onSave = () => {
// 点击保存客户
const onSave = () => {
customerFormRef.value.validateFields().then(() => {
if (customer.region !== undefined) {
customer.region = customer.region.toString()
@@ -365,10 +359,10 @@ export default {
customerFormRef.value.resetFields()
visible.value = false;
});
};
};
// 点击删除客户
const onDelete = () => {
// 点击删除客户
const onDelete = () => {
let param = {
ids: data.selectedIds
}
@@ -391,18 +385,18 @@ export default {
console.log('Cancel');
},
});
}
}
// 分页查询客户列表
const onPagination = (page) => {
// 分页查询客户列表
const onPagination = (page) => {
pagination.current = page
getCustomerList()
}
}
// 初始化数据
onMounted(() => { getCustomerList() })
// 初始化数据
onMounted(() => { getCustomerList() })
const getCustomerList = () => {
const getCustomerList = () => {
let param = {
name: keyWord.value,
pageNum: pagination.current,
@@ -414,10 +408,10 @@ export default {
data.customerList = res.data.data.list
}
})
}
}
// 导出表格
const onExport = () => {
// 导出表格
const onExport = () => {
customerExport().then((res) => {
if (res.data.type == 'application/json') {
message.error('导出错误！')
@@ -432,24 +426,24 @@ export default {
window.URL.revokeObjectURL(a.href)
}
})
}
}
const mail = reactive({
const mail = reactive({
customerName: '',
receiver: '',
subject: '',
content: ''
})
})
// 点击邮件
const onMail = (cname, email) => {
// 点击邮件
const onMail = (cname, email) => {
mail.customerName = cname
mail.receiver = email
visibleMail.value = true
}
}
// 点击发送邮件
const onSend = () => {
// 点击发送邮件
const onSend = () => {
let param = {
receiver: mail.receiver,
subject: mail.subject,
@@ -466,53 +460,18 @@ export default {
message.warn("邮件服务未开启")
}
})
}
}
// 点击取消按钮
const onCancel = () => {
// 点击取消按钮
const onCancel = () => {
customerFormRef.value.resetFields()
visible.value = false
};
};
const options = regionData
const options = regionData
const selectedOptions = (value) => {
const selectedOptions = (value) => {
customer.region = value
}
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
};
},
}
</script>
web/src/views/Dashboard.vue
+11 -26
View File
@@ -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,29 +110,23 @@ 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({
const data = reactive({
customers: 0,
contracts: 0,
contractAmount: 0.00,
products: 0,
})
})
onBeforeMount(() => {
onBeforeMount(() => {
subscribeInfo();
initChart();
});
});
const initChart = () => {
const initChart = () => {
let param = {
daysRange: daysRange.value
}
@@ -212,24 +206,15 @@ export default {
})
}
})
}
}
// 获取用户订阅信息
const subscribeInfo = () => {
// 获取用户订阅信息
const subscribeInfo = () => {
getSubscribeInfo().then((res) => {
if (res.data.code == 0 && res.data.data.version == 1) {
router.push('/result')
}
})
}
return {
data,
daysRange,
initChart,
subscribeInfo,
}
}
}
</script>
web/src/views/Error.vue
+2 -9
View File
@@ -8,18 +8,11 @@
</div>
</template>
<script>
<script setup>
import router from '../router/index';
export default {
setup() {
const refresh = () => {
const refresh = () => {
router.push('/')
}
return {
refresh
}
}
}
</script>
web/src/views/Home.vue
+84 -122
View File
@@ -2,8 +2,8 @@
<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><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">
@@ -32,16 +32,20 @@
<BellFilled style="font-size: 18px;" />
</template>
</a-avatar>
<a-avatar shape="square" style="color: #476FFF; background-color: #ccd6fa" :size="20" v-else>
<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;">&nbsp;&nbsp;&nbsp;{{ item.content }}</div>
<div v-if="item.status == 1" style="color: #717171;">
&nbsp;&nbsp;&nbsp;{{ item.content }}</div>
<div v-else>&nbsp;&nbsp;&nbsp;{{ item.content }}</div>
</div>
<template #actions>
<span v-if="item.status == 2" style="color: black;">{{ formatDate(item.created) }}</span>
<span v-if="item.status == 2" style="color: black;">{{
formatDate(item.created)
}}</span>
<span v-else>{{ formatDate(item.created) }}</span>
</template>
</a-list-item>
@@ -49,8 +53,8 @@
</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>
<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">
@@ -72,8 +76,8 @@
</a-dropdown>
</div>
<!-- 注销账号弹出框 -->
<a-modal v-model:visible="visible" title="注销账号" @ok="onConfirm" @cancel="onCancel" cancelText="取消" okText="注销"
width="400px" :centered="true">
<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">
@@ -81,14 +85,14 @@
</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">
<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' }">
<a-layout-content :style="{ margin: '10px', background: '#fff', overflow: 'initial', borderRadius: '5px' }">
<transition name="fade">
<router-view v-slot="{ Component }">
<component :is="Component" />
@@ -99,7 +103,7 @@
</a-layout>
</template>
<script>
<script setup>
import { reactive, ref, onBeforeMount } from 'vue';
import { useRouter } from 'vue-router'
import { useStore } from '../store/index';
@@ -110,55 +114,41 @@ 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([{
// 菜单选项
const menuItem = reactive([{
key: "dashboard",
to: "/dashboard",
icon: "dashboard-outlined",
icon: DashboardOutlined,
name: "仪表盘"
}, {
}, {
key: "customer",
to: "/customer",
icon: "smile-outlined",
icon: SmileOutlined,
name: "客户"
}, {
}, {
key: "contract",
to: "/contract",
icon: "meh-outlined",
icon: MehOutlined,
name: "合同"
}, {
}, {
key: "product",
to: "/product",
icon: "shopping-outlined",
icon: ShoppingOutlined,
name: "产品"
}, {
}, {
key: "config",
to: "/config",
icon: "profile-outlined",
icon: ProfileOutlined,
name: "配置"
}, {
}, {
key: "subscribe",
to: "/subscribe",
icon: "crown-outlined",
icon: CrownOutlined,
name: "订阅"
}])
}])
// 表单校验
const rules = {
// 表单校验
const rules = {
email: [{
required: true,
message: '请输入邮箱!',
@@ -169,47 +159,47 @@ export default {
trigger: 'blur',
}],
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({
const data = reactive({
noticeCount: 0,
noticeList: []
})
})
store.$subscribe((mutation, state) => {
store.$subscribe((mutation, state) => {
selectedKeys.value = [state.selectedKeys]
})
})
const router = useRouter()
const router = useRouter()
const user = reactive({
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(() => {
// 初始化数据
onBeforeMount(() => {
store.selectedKeys = 'dashboard'
router.push('dashboard')
noticeCount()
})
})
// 点击用户头像
const onUserAvatar = () => {
// 点击用户头像
const onUserAvatar = () => {
getUserInfo().then((res) => {
if (res.data.code == 0) {
user.name = res.data.data.name
@@ -217,15 +207,15 @@ export default {
user.version = res.data.data.version
}
})
}
}
// 跳转到项目文档
const toDocs = () => {
// 跳转到项目文档
const toDocs = () => {
window.open("https://docs.zocrm.cloud")
}
}
// 点击获取验证码
const onGetCode = () => {
// 点击获取验证码
const onGetCode = () => {
if (user.email == '') {
message.warn('邮箱不能为空')
return
@@ -245,10 +235,10 @@ export default {
message.error('验证码发送失败')
}
})
}
}
// 点击确认注销账号
const onConfirm = () => {
// 点击确认注销账号
const onConfirm = () => {
let param = {
email: user.email,
code: user.code
@@ -259,10 +249,10 @@ export default {
message.success('账号已注销')
}
})
}
}
// 日期格式化
const formatDate = (timeStamp) => {
// 日期格式化
const formatDate = (timeStamp) => {
let now = (Date.parse(new Date())) / 1000
if (now - timeStamp < 60) {
return "刚刚"
@@ -271,38 +261,38 @@ export default {
return "今天 " + moment(timeStamp * 1000).format('HH:mm')
}
return moment(timeStamp * 1000).format('YYYY-MM-DD')
}
}
// 点击读取通知
const onReadNotice = (id) => {
// 点击读取通知
const onReadNotice = (id) => {
updateNotice({ id: id }).then((res) => {
if (res.data.code == 0) {
onNotice()
noticeCount()
}
})
}
}
// 获取通知数量
const noticeCount = () => {
// 获取通知数量
const noticeCount = () => {
getNoticeCount().then((res) => {
if (res.data.code == 0) {
data.noticeCount = res.data.data.count
}
})
}
}
// 获取通知列表
const onNotice = () => {
// 获取通知列表
const onNotice = () => {
getNoticeList().then((res) => {
if (res.data.code == 0) {
data.noticeList = res.data.data
}
})
}
}
// 删除通知
const onDeleteNotice = () => {
// 删除通知
const onDeleteNotice = () => {
let ids = []
for (let index = 0; index < data.noticeList.length; index++) {
ids[index] = data.noticeList[index].id
@@ -313,48 +303,20 @@ export default {
onNotice()
}
})
}
}
// 点击退出账号
const onLogout = () => {
// 点击退出账号
const onLogout = () => {
localStorage.removeItem("uid")
localStorage.removeItem("token")
router.push('/')
}
}
// 点击取消按钮
const onCancel = () => {
// 点击取消按钮
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
};
},
}
</script>
web/src/views/Index.vue
+1 -3
View File
@@ -24,10 +24,8 @@
</div>
</template>
<script>
export default {
<script setup>
}
</script>
<style scoped>
web/src/views/Login.vue
+18 -35
View File
@@ -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,21 +39,15 @@ 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({
// 用户登录
const formData = reactive({
email: '1655064994@qq.com',
password: '1655064994',
remember: true,
});
const onLogin = () => {
});
const onLogin = () => {
let param = {
email: formData.email,
password: formData.password
@@ -75,23 +69,23 @@ export default {
message.error('用户名或密码错误');
}
})
};
const onLoginFailed = errorInfo => {
};
const onLoginFailed = errorInfo => {
console.log('Failed:', errorInfo);
};
};
// 忘记密码
const forgotPass = () => {
// 忘记密码
const forgotPass = () => {
router.push("/pass")
}
}
// 用户注册
const toRegister = () => {
// 用户注册
const toRegister = () => {
router.push("/register")
}
}
// 初始化数据（只会在生产环境中初始化）
const initSysData = () => {
// 初始化数据（只会在生产环境中初始化）
const initSysData = () => {
initData().then((res) => {
if (res.data.code == 10) {
message.success('初始化数据成功！')
@@ -100,18 +94,7 @@ export default {
message.error('初始化数据失败！')
}
})
}
return {
formData,
onLogin,
onLoginFailed,
forgotPass,
toRegister,
initSysData,
};
}
};
}
</script>
<style scoped>
web/src/views/Pass.vue
+19 -35
View File
@@ -22,26 +22,24 @@
</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({
// 重置密码
const formData = reactive({
email: '',
code: '',
password1: '',
password2: '',
});
});
// 表单校验
const rules = {
// 表单校验
const rules = {
email: [{
required: true,
message: '请输入邮箱!'
@@ -53,14 +51,14 @@ export default {
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 = () => {
const onSubmit = () => {
passFormRef.value.validateFields().then(() => {
let param = {
email: formData.email,
@@ -77,10 +75,10 @@ export default {
}
})
})
};
};
// 获取验证码
const onGetCode = () => {
// 获取验证码
const onGetCode = () => {
if (formData.email == '') {
message.warn('邮箱不能为空')
return
@@ -100,25 +98,11 @@ export default {
message.error('验证码发送失败')
}
})
}
}
// 跳转到登录页面
const onLogin = () => {
// 跳转到登录页面
const onLogin = () => {
router.push("/login")
}
return {
formData,
rules,
passFormRef,
loading,
disabled,
buttonText,
onSubmit,
onGetCode,
onLogin,
};
},
}
</script>
web/src/views/Product.vue
+64 -97
View File
@@ -107,78 +107,72 @@
</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 = [{
// 表格字段
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 = {
// 表单校验
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({
// 产品属性
let product = reactive({
id: undefined,
name: undefined,
type: undefined,
@@ -187,59 +181,59 @@ export default {
price: undefined,
status: undefined,
description: undefined,
});
});
// 产品列表
const data = reactive({
// 产品列表
const data = reactive({
productList: [],
selectedIds: []
})
})
// 表格分页
let pagination = reactive({
// 表格分页
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 => {
// 表格记录多选
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 = () => {
// 点击全部产品
const onProducts = () => {
keyWord.value = ''
getProductList()
}
}
// 点击新建产品
const onCreate = () => {
// 点击新建产品
const onCreate = () => {
title.value = '新建产品'
operation.value = 1
visible.value = true
}
}
// 点击产品名称
const onEdit = (row) => {
// 点击产品名称
const onEdit = (row) => {
title.value = '编辑产品'
operation.value = 2
let param = { id: row.id }
@@ -257,10 +251,10 @@ export default {
}
})
visible.value = true
}
}
// 点击保存产品
const onSave = () => {
// 点击保存产品
const onSave = () => {
productFormRef.value.validateFields().then(() => {
if (operation.value == 1) {
createProduct(product).then((res) => {
@@ -281,10 +275,10 @@ export default {
productFormRef.value.resetFields()
visible.value = false;
});
};
};
// 点击删除产品
const onDelete = () => {
// 点击删除产品
const onDelete = () => {
Modal.confirm({
title: '确定删除选中的' + data.selectedIds.length + '项吗?',
icon: createVNode(ExclamationCircleOutlined),
@@ -304,16 +298,16 @@ export default {
console.log('Cancel');
},
});
}
}
// 分页查询产品列表
const onPagination = (page) => {
// 分页查询产品列表
const onPagination = (page) => {
pagination.current = page
getProductList()
}
}
// 查询产列表
const getProductList = () => {
// 查询产列表
const getProductList = () => {
let param = {
name: keyWord.value,
pageNum: pagination.current,
@@ -325,12 +319,12 @@ export default {
data.productList = res.data.data.list
}
})
}
}
// 导出表格
const onExport = () => {
// 导出表格
const onExport = () => {
productExport().then((res) => {
if (res.data.type == 'application/json'){
if (res.data.type == 'application/json') {
message.error('导出错误！')
} else {
let blob = new Blob([res.data], {
@@ -343,39 +337,12 @@ export default {
window.URL.revokeObjectURL(a.href)
}
})
}
}
// 点击取消按钮
const onCancel = () => {
// 点击取消按钮
const onCancel = () => {
productFormRef.value.resetFields()
visible.value = false
};
return {
columns,
rules,
data,
onSelectChange,
onSearch,
product,
title,
visible,
disabled,
operation,
onProducts,
onCreate,
onEdit,
productFormRef,
onSave,
onCancel,
onDelete,
getProductList,
onExport,
keyWord,
pagination,
onPagination,
};
},
}
</script>
web/src/views/Register.vue
+19 -35
View File
@@ -22,26 +22,24 @@
</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({
// 用户注册
const formData = reactive({
email: '',
code: '',
password1: '',
password2: '',
});
});
// 表单校验
const rules = {
// 表单校验
const rules = {
email: [{
required: true,
message: '请输入邮箱!',
@@ -54,14 +52,14 @@ export default {
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 = () => {
const onRegister = () => {
registerFormRef.value.validateFields().then(() => {
if (formData.password1 != formData.password2) {
message.warn('密码不一致');
@@ -85,10 +83,10 @@ export default {
}
})
})
};
};
// 获取验证码
const onGetCode = () => {
// 获取验证码
const onGetCode = () => {
if (formData.email == '') {
message.warn('邮箱不能为空')
return
@@ -108,25 +106,11 @@ export default {
message.error('验证码发送失败')
}
})
}
}
// 跳转到登录页面
const onLogin = () => {
// 跳转到登录页面
const onLogin = () => {
router.push("/login")
}
return {
formData,
rules,
registerFormRef,
loading,
disabled,
buttonText,
onRegister,
onLogin,
onGetCode,
};
},
}
</script>
web/src/views/Result.vue
+4 -12
View File
@@ -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 = () => {
const onBuy = () => {
store.selectedKeys = 'subscribe'
router.push('/subscribe')
}
return {
onBuy
}
}
}
</script>
web/src/views/Subscribe.vue
+25 -46
View File
@@ -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,41 +56,35 @@
</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) => {
const isClick = (index) => {
active.value = index
}
}
// 初始化数据
onBeforeMount(() => { subscribeInfo() })
// 初始化数据
onBeforeMount(() => { subscribeInfo() })
// 点击支付
const onPay = (ver) => {
// 点击支付
const onPay = (ver) => {
let param = {
version: ver
}
@@ -99,10 +95,10 @@ export default {
window.open(res.data.data.payUrl, '_self')
}
})
}
}
// 获取用户订阅信息
const subscribeInfo = () => {
// 获取用户订阅信息
const subscribeInfo = () => {
getSubscribeInfo().then((res) => {
if (res.data.code == 0) {
version.value = res.data.data.version
@@ -114,27 +110,10 @@ export default {
activedClass[0] = 'selected-free-card'
}
if (res.data.data.version == 2 || res.data.data.version == 3) {
activedClass[res.data.data.version-1] = 'selected-card'
activedClass[res.data.data.version - 1] = 'selected-card'
}
}
})
}
return {
version,
expired,
onPay,
payUrl,
visible,
disabled,
payResult,
title,
activedClass,
buttonText,
isClick,
subscribeInfo,
}
}
}
</script>