You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
131 lines
4.1 KiB
131 lines
4.1 KiB
<template>
|
|
<div class="order-list">
|
|
<BasicTable @register="registerTable">
|
|
<template #toolbar>
|
|
<div style="width: 100%; padding: 2px" class="flex-row-center-space">
|
|
<RadioGroup button-style="solid" v-model:value="radioVal" @change="handleRadioChange">
|
|
<RadioButton v-for="item in activityStatusList" :key="item.value" :value="item.value">{{
|
|
item.label
|
|
}}</RadioButton>
|
|
</RadioGroup>
|
|
<div class="flex-row">
|
|
<Button :type="'primary'" @click="handleAdd">导入</Button>
|
|
<Button :type="'primary'" style="margin-left: 16px;" @click="handleAdd">新增</Button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<template #userinfo="{ text, record }">
|
|
<div class="flex-row">
|
|
<Image style="width: 40px;height: 40px;" src="https://dating-agency-test.oss-accelerate.aliyuncs.com/B96BAC02B145C2D.png" />
|
|
<div class="flex-col" style="margin-left: 8px;">
|
|
<div class="flex-row">
|
|
<span style="font-size: 14px;color: #333;">用户昵称</span>
|
|
<span style="font-size: 13px;color: #666;margin: 0 12px;">(ID：23762736)</span>
|
|
</div>
|
|
<div class="flex-row">
|
|
<span style="font-size: 13px;color: #666;">30岁</span>
|
|
<span style="font-size: 13px;color: #666;margin-left: 12px;">大专</span>
|
|
<span style="font-size: 13px;color: #666;margin-left: 12px;">离异</span>
|
|
<span style="font-size: 13px;color: #666;margin-left: 12px;">销售</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<template #action="{ record }">
|
|
<TableAction
|
|
:actions="[
|
|
{
|
|
label: '详情',
|
|
onClick: toDetail.bind(null, record),
|
|
},
|
|
]"
|
|
/>
|
|
</template>
|
|
</BasicTable>
|
|
<ClueModal @register="registerModal" @success="handleSuccess" />
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Radio } from 'ant-design-vue'
|
|
|
|
export default {
|
|
name: 'ClueList',
|
|
components: { RadioGroup: Radio.Group, RadioButton: Radio.Button },
|
|
}
|
|
</script>
|
|
<script setup lang="ts">
|
|
import moment from 'moment/moment'
|
|
import { computed, ref } from 'vue'
|
|
import { Card, Image, Button } from 'ant-design-vue'
|
|
import { useRouter } from 'vue-router'
|
|
import { tableColumns, tableFormSchema } from './data'
|
|
import { useModal } from '/@/components/Modal'
|
|
import { BasicTable, useTable, TableAction } from '/@/components/Table'
|
|
import ClueModal from './modal.vue'
|
|
import { getCluePage } from '/@/api/clue'
|
|
|
|
const radioVal = ref<any>('')
|
|
|
|
const activityStatusList = [
|
|
{ label: '未开始', value: 1, color: 'orange' },
|
|
{ label: '报名中', value: 2, color: 'blue' },
|
|
{ label: '全部', value: '' },
|
|
]
|
|
|
|
const [registerTable, { reload, setPagination }] = useTable({
|
|
bordered: true,
|
|
useSearchForm: true,
|
|
columns: tableColumns,
|
|
showIndexColumn: true,
|
|
showTableSetting: false,
|
|
api: getCluePage,
|
|
formConfig: {
|
|
labelWidth: 120,
|
|
schemas: tableFormSchema,
|
|
},
|
|
// beforeFetch: (arg) => {
|
|
// const { orderTime } = arg
|
|
// if (orderTime) {
|
|
// arg.orderTimeFrom = moment(orderTime[0]).format('YYYY-MM-DD 00:00:00')
|
|
// arg.orderTimeTo = moment(orderTime[1]).format('YYYY-MM-DD 23:59:59')
|
|
// delete arg.orderTime
|
|
// }
|
|
// },
|
|
actionColumn: {
|
|
width: 160,
|
|
title: '操作',
|
|
fixed: 'right',
|
|
dataIndex: 'action',
|
|
slots: { customRender: 'action' },
|
|
},
|
|
})
|
|
|
|
function handleRadioChange() {
|
|
setPagination({ current: 1 })
|
|
reload()
|
|
}
|
|
|
|
const [registerModal, { openModal, closeModal }] = useModal()
|
|
function handleAdd() {
|
|
openModal(true, {
|
|
ifUpdate: false,
|
|
})
|
|
}
|
|
// 操作成功
|
|
function handleSuccess() {
|
|
closeModal()
|
|
reload()
|
|
}
|
|
|
|
const router = useRouter()
|
|
function toDetail(record: any) {
|
|
const { miId } = record
|
|
router.push({
|
|
query: { miId },
|
|
path: '/clue/customer',
|
|
})
|
|
}
|
|
</script>
|
|
<style scoped lang="less">
|
|
</style>
|