Browse Source

优化:同步site产品的文件

dev
科技小王子 6 months ago
parent
commit
4299d63b4b
  1. 199
      src/views/cms/cmsLink/components/linkUpdate.vue
  2. 283
      src/views/cms/cmsMp2/components/cmsMpEdit.vue
  3. 42
      src/views/cms/cmsMp2/components/search.vue
  4. 254
      src/views/cms/cmsMp2/index.vue

199
src/views/cms/cmsLink/components/linkUpdate.vue

@ -0,0 +1,199 @@
<!-- 编辑弹窗 -->
<template>
<ele-modal
:width="600"
:visible="visible"
:maskClosable="false"
:maxable="maxable"
:title="'批量更新'"
:body-style="{ paddingBottom: '28px' }"
@update:visible="updateVisible"
@ok="save"
>
<a-form
ref="formRef"
:model="form"
:rules="rules"
:label-col="styleResponsive ? { md: 3, sm: 5, xs: 24 } : { flex: '90px' }"
:wrapper-col="
styleResponsive ? { md: 24, sm: 24, xs: 24 } : { flex: '1' }
"
>
<a-form-item>
<a-alert :message="'提示:每次最多修改 50000 条数据'" banner />
</a-form-item>
<a-form-item label="选择栏目">
<a-tree-select
allow-clear
:tree-data="navigationList"
tree-default-expand-all
style="width: 400px"
placeholder="请选择栏目"
:value="form.categoryId || undefined"
:dropdown-style="{ maxHeight: '360px', overflow: 'auto' }"
@update:value="(value?: number) => (form.categoryId = value)"
@change="onCategoryId"
/>
</a-form-item>
</a-form>
</ele-modal>
</template>
<script lang="ts" setup>
import { ref, reactive, watch } from 'vue';
import { Form, message } from 'ant-design-vue';
import { useThemeStore } from '@/store/modules/theme';
import { storeToRefs } from 'pinia';
import { FormInstance, RuleObject } from 'ant-design-vue/es/form';
import { CmsNavigation } from "@/api/cms/cmsNavigation/model";
import {updateBatchCmsLink} from "@/api/cms/cmsLink";
import {CmsLink} from "@/api/cms/cmsLink/model";
//
const useForm = Form.useForm;
//
const themeStore = useThemeStore();
const { styleResponsive } = storeToRefs(themeStore);
const props = defineProps<{
//
visible: boolean;
//
selection?: CmsLink[];
//
navigationList?: CmsNavigation[];
}>();
const emit = defineEmits<{
(e: 'done'): void;
(e: 'update:visible', visible: boolean): void;
}>();
//
const loading = ref(false);
//
const maxable = ref(true);
//
const formRef = ref<FormInstance | null>(null);
const content = ref('');
//
const form = reactive<CmsLink>({
// ID
id: undefined,
//
name: undefined,
//
icon: undefined,
//
url: undefined,
//
categoryId: undefined,
// ID
appId: undefined,
// ID
userId: undefined,
//
lang: undefined,
//
recommend: undefined,
//
comments: undefined,
// ()
sortNumber: undefined,
// , 0, 1
deleted: undefined,
// , 0, 1
status: undefined,
// id
tenantId: undefined,
//
createTime: undefined,
});
/* 更新visible */
const updateVisible = (value: boolean) => {
emit('update:visible', value);
};
//
const rules = reactive({
title: [
{
required: true,
message: '请选择文章标题',
type: 'string',
trigger: 'blur'
}
],
categoryId: [
{
required: true,
message: '请选择栏目',
type: 'number',
trigger: 'blur'
}
],
content: [
{
required: true,
type: "string",
message: "请输入文章内容",
trigger: "blur",
validator: async (_rule: RuleObject, value: string) => {
if (content.value == "") {
return Promise.reject("请输入文字内容");
}
return Promise.resolve();
}
}
],
});
//
const onCategoryId = (id: number) => {
console.log(id);
form.categoryId = id;
};
const { resetFields } = useForm(form, rules);
/* 保存编辑 */
const save = () => {
if (!formRef.value) {
return;
}
formRef.value
.validate()
.then(() => {
loading.value = true;
props.selection?.map(d => d.id)
updateBatchCmsLink({
ids: props.selection?.map(d => d.id),
data: {
categoryId: form.categoryId
}
}).then((msg) => {
message.success(msg);
loading.value = false;
updateVisible(false);
emit('done');
})
.catch((e) => {
message.error(e.message);
});
})
.catch(() => {});
};
watch(
() => props.visible,
(visible) => {
if (visible) {
} else {
resetFields();
}
},
{ immediate: true }
);
</script>

283
src/views/cms/cmsMp2/components/cmsMpEdit.vue

@ -1,283 +0,0 @@
<!-- 编辑弹窗 -->
<template>
<ele-modal
:width="800"
:visible="visible"
:maskClosable="false"
:maxable="maxable"
:title="isUpdate ? '编辑小程序信息' : '添加小程序信息'"
:body-style="{ paddingBottom: '28px' }"
@update:visible="updateVisible"
@ok="save"
>
<a-form
ref="formRef"
:model="form"
:rules="rules"
:label-col="styleResponsive ? { md: 4, sm: 5, xs: 24 } : { flex: '90px' }"
:wrapper-col="
styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' }
"
>
<a-form-item label="头像" name="avatar">
<SelectFile
:placeholder="`请选择图片`"
:limit="1"
:data="images"
@done="chooseImage"
@del="onDeleteItem"
/>
</a-form-item>
<a-form-item label="小程序码" name="mpQrcode">
<SelectFile
:placeholder="`请选择图片`"
:limit="1"
:data="mpQrcode"
@done="chooseMpQrcode"
@del="onDeleteMpQrcode"
/>
</a-form-item>
<a-form-item label="小程序名称" name="mpName">
<a-input
allow-clear
placeholder="请输入小程序名称"
v-model:value="form.mpName"
/>
</a-form-item>
<a-form-item label="小程序ID" name="appId">
<a-input
allow-clear
placeholder="请输入小程序ID"
v-model:value="form.appId"
/>
</a-form-item>
<a-form-item label="小程序密钥" name="appSecret">
<a-input
allow-clear
placeholder="请输入小程序密钥"
v-model:value="form.appSecret"
/>
</a-form-item>
<a-form-item label="主体信息" name="companyName">
<a-input
allow-clear
placeholder="请输入主体信息"
v-model:value="form.companyName"
/>
</a-form-item>
<a-form-item label="小程序备案" name="icpNo">
<a-input
allow-clear
placeholder="请输入小程序备案"
v-model:value="form.icpNo"
/>
</a-form-item>
<a-form-item label="登录邮箱" name="email">
<a-input
allow-clear
placeholder="请输入登录邮箱"
v-model:value="form.email"
/>
</a-form-item>
<a-form-item label="原始ID" name="ghId">
<a-input
allow-clear
placeholder="请输入原始ID"
v-model:value="form.ghId"
/>
</a-form-item>
<a-form-item label="排序" name="sortNumber">
<a-input-number
:min="0"
:max="9999"
class="ele-fluid"
placeholder="请输入排序号"
v-model:value="form.sortNumber"
/>
</a-form-item>
<a-form-item label="介绍" name="comments">
<a-textarea
:rows="4"
:maxlength="200"
placeholder="请输入描述"
v-model:value="form.comments"
/>
</a-form-item>
<a-form-item label="微信认证" name="authentication">
<a-radio-group v-model:value="form.authentication">
<a-radio :value="0">已认证</a-radio>
<a-radio :value="1">未认证</a-radio>
</a-radio-group>
</a-form-item>
</a-form>
</ele-modal>
</template>
<script lang="ts" setup>
import { ref, reactive, watch } from 'vue';
import { Form, message } from 'ant-design-vue';
import { assignObject, uuid } from 'ele-admin-pro';
import { addCmsMp, updateCmsMp } from '@/api/cms/cmsMp';
import { CmsMp } from '@/api/cms/cmsMp/model';
import { useThemeStore } from '@/store/modules/theme';
import { storeToRefs } from 'pinia';
import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
import { FormInstance } from 'ant-design-vue/es/form';
import { FileRecord } from '@/api/system/file/model';
//
const isUpdate = ref(false);
const useForm = Form.useForm;
//
const themeStore = useThemeStore();
const { styleResponsive } = storeToRefs(themeStore);
const props = defineProps<{
//
visible: boolean;
//
data?: CmsMp | null;
}>();
const emit = defineEmits<{
(e: 'done'): void;
(e: 'update:visible', visible: boolean): void;
}>();
//
const loading = ref(false);
//
const maxable = ref(true);
//
const formRef = ref<FormInstance | null>(null);
const images = ref<ItemType[]>([]);
//
const mpQrcode = ref<ItemType[]>([]);
//
const form = reactive<CmsMp>({
mpId: undefined,
type: undefined,
appId: undefined,
appSecret: undefined,
mpName: undefined,
shortName: undefined,
avatar: undefined,
mpQrcode: undefined,
authentication: undefined,
companyName: undefined,
icpNo: undefined,
email: undefined,
password: undefined,
ghId: undefined,
mainPath: undefined,
expirationTime: undefined,
comments: undefined,
userId: undefined,
status: undefined,
deleted: undefined,
tenantId: undefined,
createTime: undefined,
sortNumber: 100
});
/* 更新visible */
const updateVisible = (value: boolean) => {
emit('update:visible', value);
};
//
const rules = reactive({
cmsMpName: [
{
required: true,
type: 'string',
message: '请填写小程序信息名称',
trigger: 'blur'
}
]
});
const chooseImage = (data: FileRecord) => {
images.value.push({
uid: data.id,
url: data.path,
status: 'done'
});
form.avatar = data.path;
};
const onDeleteItem = (index: number) => {
images.value.splice(index, 1);
form.avatar = '';
};
const chooseMpQrcode = (data: FileRecord) => {
mpQrcode.value.push({
uid: data.id,
url: data.path,
status: 'done'
});
form.mpQrcode = data.downloadUrl;
};
const onDeleteMpQrcode = (index: number) => {
mpQrcode.value.splice(index, 1);
form.mpQrcode = '';
};
const { resetFields } = useForm(form, rules);
/* 保存编辑 */
const save = () => {
if (!formRef.value) {
return;
}
formRef.value
.validate()
.then(() => {
loading.value = true;
const formData = {
...form
};
const saveOrUpdate = isUpdate.value ? updateCmsMp : addCmsMp;
saveOrUpdate(formData)
.then((msg) => {
loading.value = false;
message.success(msg);
updateVisible(false);
emit('done');
})
.catch((e) => {
loading.value = false;
message.error(e.message);
});
})
.catch(() => {});
};
watch(
() => props.visible,
(visible) => {
if (visible) {
images.value = [];
if (props.data) {
assignObject(form, props.data);
if(props.data.avatar){
images.value.push({
uid: uuid(),
url: props.data.avatar,
status: 'done'
})
}
isUpdate.value = true;
} else {
isUpdate.value = false;
}
} else {
resetFields();
}
},
{ immediate: true }
);
</script>

42
src/views/cms/cmsMp2/components/search.vue

@ -1,42 +0,0 @@
<!-- 搜索表单 -->
<template>
<a-space :size="10" style="flex-wrap: wrap">
<a-button type="primary" class="ele-btn-icon" @click="add">
<template #icon>
<PlusOutlined />
</template>
<span>添加</span>
</a-button>
</a-space>
</template>
<script lang="ts" setup>
import { PlusOutlined } from '@ant-design/icons-vue';
import type { GradeParam } from '@/api/user/grade/model';
import { watch } from 'vue';
const props = withDefaults(
defineProps<{
//
selection?: [];
}>(),
{}
);
const emit = defineEmits<{
(e: 'search', where?: GradeParam): void;
(e: 'add'): void;
(e: 'remove'): void;
(e: 'batchMove'): void;
}>();
//
const add = () => {
emit('add');
};
watch(
() => props.selection,
() => {}
);
</script>

254
src/views/cms/cmsMp2/index.vue

@ -1,254 +0,0 @@
<template>
<div class="page">
<div class="ele-body">
<a-card :bordered="false" :body-style="{ padding: '16px' }">
<ele-pro-table
ref="tableRef"
row-key="cmsMpId"
:columns="columns"
:datasource="datasource"
:customRow="customRow"
tool-class="ele-toolbar-form"
class="sys-org-table"
>
<template #toolbar>
<search
@search="reload"
:selection="selection"
@add="openEdit"
@remove="removeBatch"
@batchMove="openMove"
/>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'avatar'">
<a-image :src="record.avatar" :width="50" />
</template>
<template v-if="column.key === 'mpQrcode'">
<a-image :src="record.mpQrcode" :width="50" />
</template>
<template v-if="column.key === 'status'">
<a-tag v-if="record.status === 0" color="green">显示</a-tag>
<a-tag v-if="record.status === 1" color="red">隐藏</a-tag>
</template>
<template v-if="column.key === 'action'">
<a-space>
<a @click="openEdit(record)">修改</a>
<a-divider type="vertical" />
<a-popconfirm
title="确定要删除此记录吗?"
@confirm="remove(record)"
>
<a class="ele-text-danger">删除</a>
</a-popconfirm>
</a-space>
</template>
</template>
</ele-pro-table>
</a-card>
<!-- 编辑弹窗 -->
<CmsMpEdit v-model:visible="showEdit" :data="current" @done="reload" />
</div>
</div>
</template>
<script lang="ts" setup>
import { createVNode, ref } from 'vue';
import { message, Modal } from 'ant-design-vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import type { EleProTable } from 'ele-admin-pro';
import { toDateString } from 'ele-admin-pro';
import type {
DatasourceFunction,
ColumnItem
} from 'ele-admin-pro/es/ele-pro-table/types';
import Search from './components/search.vue';
import CmsMpEdit from './components/cmsMpEdit.vue';
import { pageCmsMp, removeCmsMp, removeBatchCmsMp } from '@/api/cms/cmsMp';
import type { CmsMp, CmsMpParam } from '@/api/cms/cmsMp/model';
//
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
//
const selection = ref<CmsMp[]>([]);
//
const current = ref<CmsMp | null>(null);
//
const showEdit = ref(false);
//
const showMove = ref(false);
//
const loading = ref(true);
//
const datasource: DatasourceFunction = ({
page,
limit,
where,
orders,
filters
}) => {
if (filters) {
where.status = filters.status;
}
return pageCmsMp({
...where,
...orders,
page,
limit
});
};
//
const columns = ref<ColumnItem[]>([
{
title: '小程序名称',
dataIndex: 'mpName',
key: 'mpName',
align: 'center'
},
{
title: '头像',
dataIndex: 'avatar',
key: 'avatar',
align: 'center'
},
{
title: '小程序码',
dataIndex: 'mpQrcode',
key: 'mpQrcode',
align: 'center'
},
{
title: '主体信息',
dataIndex: 'companyName',
key: 'companyName',
align: 'center'
},
{
title: '介绍',
dataIndex: 'comments',
key: 'comments',
align: 'center'
},
{
title: '主账号',
dataIndex: 'type',
key: 'type',
align: 'center'
},
{
title: '状态',
dataIndex: 'status',
key: 'status',
align: 'center',
hideInTable: true
},
{
title: '创建时间',
dataIndex: 'createTime',
key: 'createTime',
align: 'center',
sorter: true,
ellipsis: true,
customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd')
},
{
title: '操作',
key: 'action',
width: 120,
fixed: 'right',
align: 'center',
hideInSetting: true
}
]);
/* 搜索 */
const reload = (where?: CmsMpParam) => {
selection.value = [];
tableRef?.value?.reload({ where: where });
};
/* 打开编辑弹窗 */
const openEdit = (row?: CmsMp) => {
current.value = row ?? null;
showEdit.value = true;
};
/* 打开批量移动弹窗 */
const openMove = () => {
showMove.value = true;
};
/* 删除单个 */
const remove = (row: CmsMp) => {
const hide = message.loading('请求中..', 0);
removeCmsMp(row.cmsMpId)
.then((msg) => {
hide();
message.success(msg);
reload();
})
.catch((e) => {
hide();
message.error(e.message);
});
};
/* 批量删除 */
const removeBatch = () => {
if (!selection.value.length) {
message.error('请至少选择一条数据');
return;
}
Modal.confirm({
title: '提示',
content: '确定要删除选中的记录吗?',
icon: createVNode(ExclamationCircleOutlined),
maskClosable: true,
onOk: () => {
const hide = message.loading('请求中..', 0);
removeBatchCmsMp(selection.value.map((d) => d.cmsMpId))
.then((msg) => {
hide();
message.success(msg);
reload();
})
.catch((e) => {
hide();
message.error(e.message);
});
}
});
};
/* 查询 */
const query = () => {
loading.value = true;
};
/* 自定义行属性 */
const customRow = (record: CmsMp) => {
return {
//
onClick: () => {
// console.log(record);
},
//
onDblclick: () => {
openEdit(record);
}
};
};
query();
</script>
<script lang="ts">
export default {
name: 'CmsMp'
};
</script>
<style lang="less" scoped></style>
Loading…
Cancel
Save