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