|
@@ -0,0 +1,164 @@
|
|
|
+<!-- bannerUrl: ""
|
|
|
+iconUrl: ""
|
|
|
+imgUrl: ""
|
|
|
+isShow: "0"
|
|
|
+level: "L1"
|
|
|
+name: "test"
|
|
|
+type: 0
|
|
|
+wapBannerUrl: "https://4dkk.4dage.com/shop/huafa/20220302/23135195983e96.png?x-oss-process=image/resize,m_fixed,w_100,h_100" -->
|
|
|
+<template>
|
|
|
+ <BasicModal v-bind="$attrs" @register="register" title="新 增" @ok="handleOk">
|
|
|
+ <div class="pt-3px pr-3px">
|
|
|
+ <BasicForm @register="registerForm" :model="model" />
|
|
|
+ </div>
|
|
|
+ </BasicModal>
|
|
|
+</template>
|
|
|
+<script lang="ts">
|
|
|
+ import { defineComponent, ref } from 'vue';
|
|
|
+ import { categoryApi, uploadBannerApi } from '/@/api/product/category';
|
|
|
+ import { TreeNode } from '/@/utils/treeUtils';
|
|
|
+ import { BasicModal, useModalInner } from '/@/components/Modal';
|
|
|
+ import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
|
|
|
+
|
|
|
+ const isLevel2 = (type: string) => type === 'L2';
|
|
|
+ const schemas: FormSchema[] = [
|
|
|
+ {
|
|
|
+ field: 'name',
|
|
|
+ component: 'Input',
|
|
|
+ label: '分类名称',
|
|
|
+ colProps: {
|
|
|
+ span: 24,
|
|
|
+ },
|
|
|
+ required: true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: 'level',
|
|
|
+ component: 'RadioGroup',
|
|
|
+ label: '级别',
|
|
|
+ defaultValue: 'L1',
|
|
|
+ colProps: {
|
|
|
+ span: 24,
|
|
|
+ },
|
|
|
+ componentProps: {
|
|
|
+ options: [
|
|
|
+ {
|
|
|
+ label: '一级分类',
|
|
|
+ value: 'L1',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '二级分类',
|
|
|
+ value: 'L2',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ },
|
|
|
+
|
|
|
+ {
|
|
|
+ field: 'parent_id',
|
|
|
+ component: 'ApiSelect',
|
|
|
+ label: '上级分类',
|
|
|
+ ifShow: ({ values }) => isLevel2(values.level),
|
|
|
+ colProps: {
|
|
|
+ span: 18,
|
|
|
+ },
|
|
|
+ componentProps: {
|
|
|
+ api: async function (params) {
|
|
|
+ console.log('params', params);
|
|
|
+ const res = (await categoryApi(params)) as any as TreeNode[];
|
|
|
+ // const treeData = makeTree(res);
|
|
|
+ return res.filter((i) => i.level === 'L2');
|
|
|
+ },
|
|
|
+ labelField: 'name',
|
|
|
+ valueField: 'id',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: 'isShow',
|
|
|
+ component: 'RadioGroup',
|
|
|
+ label: '是否显示',
|
|
|
+ defaultValue: '1',
|
|
|
+ colProps: {
|
|
|
+ span: 24,
|
|
|
+ },
|
|
|
+ componentProps: {
|
|
|
+ options: [
|
|
|
+ {
|
|
|
+ label: '不显示',
|
|
|
+ value: '0',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '显示',
|
|
|
+ value: '1',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: 'type',
|
|
|
+ component: 'InputNumber',
|
|
|
+ label: '排序',
|
|
|
+ defaultValue: 1,
|
|
|
+ colProps: {
|
|
|
+ span: 24,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: 'wapBannerUrl',
|
|
|
+ component: 'Upload',
|
|
|
+ label: '主图',
|
|
|
+ rules: [{ required: true, message: '请选择上传文件' }],
|
|
|
+ componentProps: {
|
|
|
+ api: uploadBannerApi,
|
|
|
+ maxNumber: 1,
|
|
|
+ afterFetch: function (data) {
|
|
|
+ Reflect.set(data, 'url', data.message.url);
|
|
|
+ return data;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ required: true,
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ export default defineComponent({
|
|
|
+ components: { BasicModal, BasicForm },
|
|
|
+ props: {
|
|
|
+ userData: { type: Object },
|
|
|
+ },
|
|
|
+ setup() {
|
|
|
+ const modelRef = ref({});
|
|
|
+ const [
|
|
|
+ registerForm,
|
|
|
+ {
|
|
|
+ // setFieldsValue,
|
|
|
+ getFieldsValue,
|
|
|
+ },
|
|
|
+ ] = useForm({
|
|
|
+ labelWidth: 120,
|
|
|
+ schemas,
|
|
|
+ showActionButtonGroup: false,
|
|
|
+ actionColOptions: {
|
|
|
+ span: 24,
|
|
|
+ },
|
|
|
+ });
|
|
|
+
|
|
|
+ const [register, { closeModal }] = useModalInner((data) => {
|
|
|
+ data && onDataReceive(data);
|
|
|
+ });
|
|
|
+
|
|
|
+ function onDataReceive(data) {
|
|
|
+ console.log('Data Received', data);
|
|
|
+
|
|
|
+ modelRef.value = { field2: data.data, field1: data.info };
|
|
|
+ }
|
|
|
+
|
|
|
+ async function handleOk() {
|
|
|
+ let data = getFieldsValue();
|
|
|
+ console.log('data', data);
|
|
|
+ // let res = await saveItemApi(data);
|
|
|
+
|
|
|
+ closeModal();
|
|
|
+ }
|
|
|
+
|
|
|
+ return { register, schemas, registerForm, model: modelRef, handleOk };
|
|
|
+ },
|
|
|
+ });
|
|
|
+</script>
|