|
@@ -20,32 +20,49 @@
|
|
<template #bodyCell="{ column, record }">
|
|
<template #bodyCell="{ column, record }">
|
|
<template v-if="column.key === 'action'">
|
|
<template v-if="column.key === 'action'">
|
|
<TableAction
|
|
<TableAction
|
|
- :actions="[
|
|
|
|
- {
|
|
|
|
- icon: 'clarity:note-edit-line',
|
|
|
|
- onClick: handleEdit.bind(null, record),
|
|
|
|
|
|
+ :actions="[{
|
|
|
|
+ label: t('common.qrcode'),
|
|
|
|
+ onClick: handelPreviewVcode.bind(null, record)
|
|
|
|
+ }, {
|
|
|
|
+ // icon: 'clarity:note-edit-line',
|
|
|
|
+ label: t('common.edit'),
|
|
|
|
+ onClick: handleEdit.bind(null, record),
|
|
|
|
+ }, {
|
|
|
|
+ // icon: 'ant-design:delete-outlined',
|
|
|
|
+ // color: 'error',
|
|
|
|
+ label: t('common.delete'),
|
|
|
|
+ popConfirm: {
|
|
|
|
+ title: t('common.deleteConfirm'),
|
|
|
|
+ placement: 'left',
|
|
|
|
+ confirm: handleDelete.bind(null, record),
|
|
},
|
|
},
|
|
- {
|
|
|
|
- icon: 'ant-design:delete-outlined',
|
|
|
|
- color: 'error',
|
|
|
|
- popConfirm: {
|
|
|
|
- title: t('common.deleteConfirm'),
|
|
|
|
- placement: 'left',
|
|
|
|
- confirm: handleDelete.bind(null, record),
|
|
|
|
- },
|
|
|
|
- },
|
|
|
|
- ]"
|
|
|
|
|
|
+ }]"
|
|
/>
|
|
/>
|
|
</template>
|
|
</template>
|
|
</template>
|
|
</template>
|
|
</BasicTable>
|
|
</BasicTable>
|
|
<WxCardDrawer @register="registerDrawer" @success="handleSuccess" />
|
|
<WxCardDrawer @register="registerDrawer" @success="handleSuccess" />
|
|
|
|
+ <Modal
|
|
|
|
+ v-model:open="modalVisible"
|
|
|
|
+ title="二维码"
|
|
|
|
+ class="custom-modal"
|
|
|
|
+ >
|
|
|
|
+ <Flex justify="center">
|
|
|
|
+ <Image :src="qrcodeSrc" width="280px" height="280px" :preview="false">
|
|
|
|
+ <template #placeholder>
|
|
|
|
+ <Flex align="center" justify="center">
|
|
|
|
+ <LoadingOutlined />
|
|
|
|
+ </Flex>
|
|
|
|
+ </template>
|
|
|
|
+ </Image>
|
|
|
|
+ </Flex>
|
|
|
|
+ </Modal>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
<script lang="ts">
|
|
<script lang="ts">
|
|
- import { createVNode, defineComponent, ref } from 'vue';
|
|
|
|
- import { Modal } from 'ant-design-vue';
|
|
|
|
- import { ExclamationCircleOutlined } from '@ant-design/icons-vue/lib/icons';
|
|
|
|
|
|
+ import { createVNode, defineComponent, ref, h } from 'vue';
|
|
|
|
+ import { Modal, Image, Flex } from 'ant-design-vue';
|
|
|
|
+ import { ExclamationCircleOutlined, LoadingOutlined } from '@ant-design/icons-vue/lib/icons';
|
|
import { BasicTable, useTable, TableAction } from '@/components/Table';
|
|
import { BasicTable, useTable, TableAction } from '@/components/Table';
|
|
import { Button } from '@/components/Button';
|
|
import { Button } from '@/components/Button';
|
|
|
|
|
|
@@ -58,11 +75,13 @@
|
|
|
|
|
|
export default defineComponent({
|
|
export default defineComponent({
|
|
name: 'WxCardManagement',
|
|
name: 'WxCardManagement',
|
|
- components: { BasicTable, WxCardDrawer, TableAction, Button },
|
|
|
|
|
|
+ components: { BasicTable, WxCardDrawer, TableAction, Button, Modal, Image, Flex, LoadingOutlined },
|
|
setup() {
|
|
setup() {
|
|
const { t } = useI18n();
|
|
const { t } = useI18n();
|
|
const selectedIds = ref<number[] | string[]>();
|
|
const selectedIds = ref<number[] | string[]>();
|
|
const showDeleteButton = ref<boolean>(false);
|
|
const showDeleteButton = ref<boolean>(false);
|
|
|
|
+ const modalVisible = ref<boolean>(false)
|
|
|
|
+ const qrcodeSrc = ref('')
|
|
|
|
|
|
const [registerDrawer, { openDrawer }] = useDrawer();
|
|
const [registerDrawer, { openDrawer }] = useDrawer();
|
|
const [registerTable, { reload }] = useTable({
|
|
const [registerTable, { reload }] = useTable({
|
|
@@ -79,15 +98,15 @@
|
|
showIndexColumn: false,
|
|
showIndexColumn: false,
|
|
clickToRowSelect: false,
|
|
clickToRowSelect: false,
|
|
actionColumn: {
|
|
actionColumn: {
|
|
- width: 30,
|
|
|
|
|
|
+ width: 200,
|
|
title: t('common.action'),
|
|
title: t('common.action'),
|
|
dataIndex: 'action',
|
|
dataIndex: 'action',
|
|
- fixed: undefined,
|
|
|
|
|
|
+ fixed: 'right',
|
|
},
|
|
},
|
|
rowKey: 'id',
|
|
rowKey: 'id',
|
|
rowSelection: {
|
|
rowSelection: {
|
|
type: 'checkbox',
|
|
type: 'checkbox',
|
|
- columnWidth: 20,
|
|
|
|
|
|
+ columnWidth: 30,
|
|
onChange: (selectedRowKeys, _selectedRows) => {
|
|
onChange: (selectedRowKeys, _selectedRows) => {
|
|
selectedIds.value = selectedRowKeys as number[];
|
|
selectedIds.value = selectedRowKeys as number[];
|
|
showDeleteButton.value = selectedRowKeys.length > 0;
|
|
showDeleteButton.value = selectedRowKeys.length > 0;
|
|
@@ -101,6 +120,12 @@
|
|
});
|
|
});
|
|
}
|
|
}
|
|
|
|
|
|
|
|
+ async function handelPreviewVcode(record: Recordable) {
|
|
|
|
+ const src = `https://wxadminapi.gkscrm.com/wechat-api/api/card/qrcode?path=pages/chatInfo/index?card_id=${record.id}&width=50&envVersion=release`;
|
|
|
|
+ qrcodeSrc.value = src
|
|
|
|
+ modalVisible.value = true
|
|
|
|
+ }
|
|
|
|
+
|
|
function handleEdit(record: Recordable) {
|
|
function handleEdit(record: Recordable) {
|
|
openDrawer(true, {
|
|
openDrawer(true, {
|
|
record,
|
|
record,
|
|
@@ -138,9 +163,12 @@
|
|
|
|
|
|
return {
|
|
return {
|
|
t,
|
|
t,
|
|
|
|
+ modalVisible,
|
|
|
|
+ qrcodeSrc,
|
|
registerTable,
|
|
registerTable,
|
|
registerDrawer,
|
|
registerDrawer,
|
|
handleCreate,
|
|
handleCreate,
|
|
|
|
+ handelPreviewVcode,
|
|
handleEdit,
|
|
handleEdit,
|
|
handleDelete,
|
|
handleDelete,
|
|
handleSuccess,
|
|
handleSuccess,
|