Skip to content

C
customisation-management_front
Commit db60a6f0 by qinjianhui
Options

fix: 格式化代码

parent ee8406a7
Showing with 382 additions and 329 deletions
src/api/product.ts
import request from '@/utils/request' import request from '@/utils/request'
//设计产品/成品/系统素材三级分类列表 //设计产品/成品/系统素材三级分类列表
export function shopTypeList(params?: any) { export function shopTypeList(params?: any) {
return request.get({ url: '/api/diy/template/type/list', params }) return request.get({ url: '/api/diy/template/type/list', params })
} }
//新增设计产品/成品/系统素材三级分类 //新增设计产品/成品/系统素材三级分类
export function shopTypeSave(params?: any) { export function shopTypeSave(params?: any) {
return request.post({ url: '/api/diy/template/type/create', params }) return request.post({ url: '/api/diy/template/type/create', params })
} }
//设计产品/成品/系统素材三级分类详情 //设计产品/成品/系统素材三级分类详情
export function shopTypeUpdate(params?: any) { export function shopTypeUpdate(params?: any) {
return request.post({ url: '/api/diy/template/type/update', params }) return request.post({ url: '/api/diy/template/type/update', params })
} }
//启用/禁用/删除设计产品/成品/系统素材三级分类 //启用/禁用/删除设计产品/成品/系统素材三级分类
export function shopTypeChangeStatus(params?: any) { export function shopTypeChangeStatus(params?: any) {
return request.post({ url: '/api/diy/template/type/delete', params }) return request.post({ url: '/api/diy/template/type/delete', params })
} }
// 分类首页/取消首页显示 // 分类首页/取消首页显示
export function shopTypeChangeTop(params?: any) { export function shopTypeChangeTop(params?: any) {
return request.post({ url: '/shop/type/changeTop', params }) return request.post({ url: '/shop/type/changeTop', params })
} }
//模板列表 //模板列表
export function foxpsdDiyTemplateListFindAndCountAll(params: Record<string, any>) { export function foxpsdDiyTemplateListFindAndCountAll(
return request.post({ url: '/api/diy/template/listFindAndCountAll', params }) params: Record<string, any>
) {
return request.post({ url: '/api/diy/template/listFindAndCountAll', params })
} }
//foxpsd 模板详情 //foxpsd 模板详情
export function foxpsdDiyTemplateItem(params: Record<string, any>) { export function foxpsdDiyTemplateItem(params: Record<string, any>) {
return request.get({ url: '/foxpsdData/api/diy/template/item', params }) return request.get({ url: '/foxpsdData/api/diy/template/item', params })
} }
//默认绑定模板 //默认绑定模板
export function apiDiyTemplateBindDiy(params?: any) { export function apiDiyTemplateBindDiy(params?: any) {
return request.post({ url: '/api/diy/template/bind/diy', params }) return request.post({ url: '/api/diy/template/bind/diy', params })
} }
// 解绑模板 // 解绑模板
export function apiDiyTemplateUnbindDiy(params?: any) { export function apiDiyTemplateUnbindDiy(params?: any) {
return request.post({ url: '/api/diy/template/unbind/diy', params }) return request.post({ url: '/api/diy/template/unbind/diy', params })
} }
// 模板创建 // 模板创建
export function apiDiyTemplateCreate(params?: any) { export function apiDiyTemplateCreate(params?: any) {
return request.post({ url: '/api/diy/template/create', params }) return request.post({ url: '/api/diy/template/create', params })
} }
// 模板创建 // 模板创建
export function apiDiyTemplateUpdate(params?: any) { export function apiDiyTemplateUpdate(params?: any) {
return request.post({ url: '/api/diy/template/update', params }) return request.post({ url: '/api/diy/template/update', params })
} }
// 模板删除 // 模板删除
export function apiDiyTemplateDelete(params?: any) { export function apiDiyTemplateDelete(params?: any) {
return request.post({ url: '/api/diy/template/delete', params }) return request.post({ url: '/api/diy/template/delete', params })
} }
// 模板详情 // 模板详情
export function apiDiyTemplateItem(params?: any) { export function apiDiyTemplateItem(params?: any) {
return request.get({ url: '/api/diy/template/item', params }) return request.get({ url: '/api/diy/template/item', params })
} }
// 模板上下架 // 模板上下架
export function apiDiyTemplateStatus(params?: any) { export function apiDiyTemplateStatus(params?: any) {
return request.post({ url: '/api/diy/template/status', params }) return request.post({ url: '/api/diy/template/status', params })
} }
// 模板绑定用户 // 模板绑定用户
export function apiDiyTemplateBindUser(params?: any) { export function apiDiyTemplateBindUser(params?: any) {
return request.post({ url: '/api/diy/template/bind/user', params }) return request.post({ url: '/api/diy/template/bind/user', params })
} }
//层面列表 //层面列表
export function apiDiyTemplateFaceList(params?: any) { export function apiDiyTemplateFaceList(params?: any) {
return request.get({ url: '/api/diy/template/face/list', params }) return request.get({ url: '/api/diy/template/face/list', params })
} }
//层面创建 //层面创建
export function apiDiyTemplateFaceCreate(params?: any) { export function apiDiyTemplateFaceCreate(params?: any) {
return request.post({ url: '/api/diy/template/face/create', params }) return request.post({ url: '/api/diy/template/face/create', params })
} }
//层面更新 //层面更新
export function apiDiyTemplateFaceUpdate(params?: any) { export function apiDiyTemplateFaceUpdate(params?: any) {
return request.post({ url: '/api/diy/template/face/update', params }) return request.post({ url: '/api/diy/template/face/update', params })
} }
//层面删除 //层面删除
export function apiDiyTemplateFaceDelete(params?: any) { export function apiDiyTemplateFaceDelete(params?: any) {
return request.post({ url: '/api/diy/template/face/delete', params }) return request.post({ url: '/api/diy/template/face/delete', params })
} }
// 效果图 // 效果图
export function apiDiyTemplateXiaoguotuList(params?: any) { export function apiDiyTemplateXiaoguotuList(params?: any) {
return request.get({ url: '/api/diy/template/xiaoguotu/list', params }) return request.get({ url: '/api/diy/template/xiaoguotu/list', params })
} }
// 效果图 // 效果图
export function apiDiyTemplateXiaoguotuCreate(params?: any) { export function apiDiyTemplateXiaoguotuCreate(params?: any) {
return request.post({ url: '/api/diy/template/xiaoguotu/create', params }) return request.post({ url: '/api/diy/template/xiaoguotu/create', params })
} }
export function apiDiyTemplateXiaoguotuUpdate(params?: any) { export function apiDiyTemplateXiaoguotuUpdate(params?: any) {
return request.post({ url: '/api/diy/template/xiaoguotu/update', params }) return request.post({ url: '/api/diy/template/xiaoguotu/update', params })
} }
export function apiDiyTemplateXiaoguotuDelete(params?: any) { export function apiDiyTemplateXiaoguotuDelete(params?: any) {
return request.post({ url: '/api/diy/template/xiaoguotu/delete', params }) return request.post({ url: '/api/diy/template/xiaoguotu/delete', params })
} }
export function apiPsdParser(params?: any) { export function apiPsdParser(params?: any) {
return request.post({ url: '/api/psd/parser', params }) return request.post({ url: '/api/psd/parser', params })
} }
// 颜色 // 颜色
export function apiDiyTemplateColorList(params?: any) { export function apiDiyTemplateColorList(params?: any) {
return request.get({ url: '/api/diy/template/color/list', params }) return request.get({ url: '/api/diy/template/color/list', params })
} }
export function apiDiyTemplateColorCreate(params?: any) { export function apiDiyTemplateColorCreate(params?: any) {
return request.post({ url: '/api/diy/template/color/create', params }) return request.post({ url: '/api/diy/template/color/create', params })
} }
export function apiDiyTemplateColorUpdate(params?: any) { export function apiDiyTemplateColorUpdate(params?: any) {
return request.post({ url: '/api/diy/template/color/update', params }) return request.post({ url: '/api/diy/template/color/update', params })
} }
export function apiDiyTemplateColorDelete(params?: any) { export function apiDiyTemplateColorDelete(params?: any) {
return request.post({ url: '/api/diy/template/color/delete', params }) return request.post({ url: '/api/diy/template/color/delete', params })
} }
//尺码 //尺码
export function apiDiyTemplateChimaList(params?: any) { export function apiDiyTemplateChimaList(params?: any) {
return request.get({ url: '/api/diy/template/chima/list', params }) return request.get({ url: '/api/diy/template/chima/list', params })
} }
export function apiDiyTemplateChimaCreate(params?: any) { export function apiDiyTemplateChimaCreate(params?: any) {
return request.post({ url: '/api/diy/template/chima/create', params }) return request.post({ url: '/api/diy/template/chima/create', params })
} }
export function apiDiyTemplateChimaUpdate(params?: any) { export function apiDiyTemplateChimaUpdate(params?: any) {
return request.post({ url: '/api/diy/template/chima/update', params }) return request.post({ url: '/api/diy/template/chima/update', params })
} }
export function apiDiyTemplateChimaDelete(params?: any) { export function apiDiyTemplateChimaDelete(params?: any) {
return request.post({ url: '/api/diy/template/chima/delete', params }) return request.post({ url: '/api/diy/template/chima/delete', params })
} }
src/views/product/lists/bindDiy.vue
...@@ -65,7 +65,7 @@ import type { FormInstance } from 'element-plus' ...@@ -65,7 +65,7 @@ import type { FormInstance } from 'element-plus'
import { import {
apiDiyTemplateUpdate, apiDiyTemplateUpdate,
apiDiyTemplateCreate, apiDiyTemplateCreate,
apiDiyTemplateBindDiy, apiDiyTemplateBindDiy
} from '@/api/product' } from '@/api/product'
import Popup from '@/components/popup/index.vue' import Popup from '@/components/popup/index.vue'
import { getImageUrl } from '@/utils/getImgUrl' import { getImageUrl } from '@/utils/getImgUrl'
...@@ -80,7 +80,7 @@ const mobanList: any = ref([]) ...@@ -80,7 +80,7 @@ const mobanList: any = ref([])
const formData = reactive({ const formData = reactive({
id: '', id: '',
diy_ids: '', //待绑定的模板 diy_ids: '', //待绑定的模板
default_diy_id: '', default_diy_id: ''
}) })
const formRules: any = reactive({ const formRules: any = reactive({
...@@ -88,9 +88,9 @@ const formRules: any = reactive({ ...@@ -88,9 +88,9 @@ const formRules: any = reactive({
{ {
required: true, required: true,
message: '请输入标签名称', message: '请输入标签名称',
trigger: 'blur', trigger: 'blur'
}, }
], ]
}) })
const templateChange = (e: any) => { const templateChange = (e: any) => {
...@@ -150,6 +150,6 @@ const handleClose = () => { ...@@ -150,6 +150,6 @@ const handleClose = () => {
defineExpose({ defineExpose({
open, open,
setFormData, setFormData,
getDetail, getDetail
}) })
</script> </script>
src/views/product/xiaoguotu/index.vue
<template> <template>
<div> <div>
<el-card class="!border-none" shadow="never"> <el-card class="!border-none" shadow="never">
<el-page-header :content="$route.meta.title" @back="goBack" /> <el-page-header :content="$route.meta.title" @back="goBack" />
</el-card> </el-card>
<el-card
<el-card class="!border-none mt-2" shadow="never" v-loading="pager.loading" v-if="activeTab=='xiaoguotu'"> class="!border-none mt-2"
shadow="never"
<el-tabs v-model="activeTab" class=" bg-white" > v-loading="pager.loading"
<el-tab-pane label="效果图" name="xiaoguotu"></el-tab-pane> v-if="activeTab == 'xiaoguotu'"
<el-tab-pane label="颜色" name="color"></el-tab-pane> >
</el-tabs> <el-tabs v-model="activeTab" class="bg-white">
<el-tab-pane label="效果图" name="xiaoguotu"></el-tab-pane>
<el-tab-pane label="颜色" name="color"></el-tab-pane>
<div class="mb-4 mt-2"> </el-tabs>
<el-button type="primary" @click="handleAdd()">
<template #icon> <div class="mb-4 mt-2">
<icon name="el-icon-Plus" /> <el-button type="primary" @click="handleAdd()">
</template> <template #icon>
新增效果图 <icon name="el-icon-Plus" />
</el-button> </template>
</div> 新增效果图
</el-button>
<div class="mt-2"> </div>
<el-table ref="tableRef" size="large" v-loading="pager.loading" :data="pager.lists" row-key="id"
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"> <div class="mt-2">
<el-table-column label="ID" prop="id" /> <el-table
ref="tableRef"
<el-table-column label="主图"> size="large"
<template #default="{ row }"> v-loading="pager.loading"
<image-contain v-if="row.img_url" :src="getImageUrl(row.img_url, 200)" :width="80" :height="80" :data="pager.lists"
:preview-src-list="[row.img_url]" preview-teleported fit="contain" /> row-key="id"
</template> :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
</el-table-column> >
<el-table-column label="ID" prop="id" />
<el-table-column label="名称" prop="title" min-width="120" />
<el-table-column label="排序" prop="idx" /> <el-table-column label="主图">
<el-table-column label="尺寸" min-width="120"> <template #default="{ row }">
<template #default="{ row }"> <image-contain
<div>{{ row.width }} X {{ row.height }} 像素</div> v-if="row.img_url"
</template> :src="getImageUrl(row.img_url, 200)"
</el-table-column> :width="80"
<el-table-column label="颜色" min-width="120"> :height="80"
<template #default="{ row }"> :preview-src-list="[row.img_url]"
<div v-if="row.db_diy_color" > preview-teleported
<div class="w-[20px] h-[20px]" :style="{background:row.db_diy_color.sezhi}"></div> fit="contain"
<div>{{ row.db_diy_color.title }}</div> />
</div> </template>
<span v-else>未绑定</span> </el-table-column>
</template>
</el-table-column> <el-table-column label="名称" prop="title" min-width="120" />
<el-table-column label="排序" prop="idx" />
<el-table-column label="分辨率" min-width="120"> <el-table-column label="尺寸" min-width="120">
<template #default="{ row }"> <template #default="{ row }">
<div>{{ row.dpi }} DPI</div> <div>{{ row.width }} X {{ row.height }} 像素</div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="颜色" min-width="120">
<el-table-column label="创建时间" prop="create_date" min-width="120" /> <template #default="{ row }">
<el-table-column label="操作" width="120" fixed="right"> <div v-if="row.db_diy_color">
<template #default="{ row }"> <div
<el-button type="primary" link @click="handleEdit(row)"> class="w-[20px] h-[20px]"
编辑 :style="{ background: row.db_diy_color.sezhi }"
</el-button> ></div>
<el-button type="danger" link @click="handleDelete(row.id)"> <div>{{ row.db_diy_color.title }}</div>
删除 </div>
</el-button> <span v-else>未绑定</span>
</template> </template>
</el-table-column> </el-table-column>
</el-table>
</div> <el-table-column label="分辨率" min-width="120">
</el-card> <template #default="{ row }">
<div>{{ row.dpi }} DPI</div>
<edit-popup v-if="showEdit" ref="editRef" @success="getLists" @close="showEdit = false" /> </template>
</el-table-column>
<ColorPage :activeTab="activeTab" v-if="activeTab=='color'" @on-change="(e)=>{activeTab=e}"/> <el-table-column
</div> label="创建时间"
prop="create_date"
min-width="120"
/>
<el-table-column label="操作" width="120" fixed="right">
<template #default="{ row }">
<el-button type="primary" link @click="handleEdit(row)">
编辑
</el-button>
<el-button type="danger" link @click="handleDelete(row.id)">
删除
</el-button>
</template>
</el-table-column>
</el-table>
</div>
</el-card>
<edit-popup
v-if="showEdit"
ref="editRef"
@success="getLists"
@close="showEdit = false"
/>
<ColorPage
:activeTab="activeTab"
v-if="activeTab == 'color'"
@on-change="
(e) => {
activeTab = e
}
"
/>
</div>
</template> </template>
<script lang="ts" setup name="productFenlei"> <script lang="ts" setup name="productFenlei">
import {
import { apiDiyTemplateXiaoguotuList, apiDiyTemplateXiaoguotuDelete } from '@/api/product' apiDiyTemplateXiaoguotuList,
apiDiyTemplateXiaoguotuDelete
} from '@/api/product'
import { usePaging } from '@/hooks/usePaging' import { usePaging } from '@/hooks/usePaging'
import feedback from '@/utils/feedback' import feedback from '@/utils/feedback'
import EditPopup from './edit.vue' import EditPopup from './edit.vue'
import type { ElTable } from 'element-plus' import type { ElTable } from 'element-plus'
import useMultipleTabs from '@/hooks/useMultipleTabs' import useMultipleTabs from '@/hooks/useMultipleTabs'
import { getImageUrl } from "@/utils/getImgUrl"; import { getImageUrl } from '@/utils/getImgUrl'
import ColorPage from "../color/index.vue"; import ColorPage from '../color/index.vue'
const { removeTab } = useMultipleTabs() const { removeTab } = useMultipleTabs()
const route = useRoute(); const route = useRoute()
const router = useRouter(); const router = useRouter()
const goBack = () => { const goBack = () => {
removeTab(); removeTab()
router.go(-1); router.go(-1)
} }
const editRef = shallowRef<InstanceType<typeof EditPopup>>() const editRef = shallowRef<InstanceType<typeof EditPopup>>()
...@@ -109,40 +143,35 @@ const showEdit = ref(false) ...@@ -109,40 +143,35 @@ const showEdit = ref(false)
const activeTab = ref('xiaoguotu') const activeTab = ref('xiaoguotu')
const paramsData: any = reactive({ const paramsData: any = reactive({
diy_id: route.query.did diy_id: route.query.did
}) })
const { type } = defineProps(['type']); const { type } = defineProps(['type'])
type && (paramsData.type = type); type && (paramsData.type = type)
const { pager, getLists } = usePaging({ const { pager, getLists } = usePaging({
fetchFun: apiDiyTemplateXiaoguotuList, fetchFun: apiDiyTemplateXiaoguotuList,
params: paramsData params: paramsData
}) })
const handleAdd = async () => { const handleAdd = async () => {
showEdit.value = true; showEdit.value = true
await nextTick(); await nextTick()
editRef.value?.open('add', pager); editRef.value?.open('add', pager)
} }
const handleEdit = async (data: any) => { const handleEdit = async (data: any) => {
showEdit.value = true; showEdit.value = true
await nextTick(); await nextTick()
editRef.value?.open('edit', pager); editRef.value?.open('edit', pager)
editRef.value?.getDetail(data) editRef.value?.getDetail(data)
} }
const handleDelete = async (id: number) => { const handleDelete = async (id: number) => {
await feedback.confirm('确定要删除？') await feedback.confirm('确定要删除？')
await apiDiyTemplateXiaoguotuDelete({ id }) await apiDiyTemplateXiaoguotuDelete({ id })
getLists() getLists()
} }
getLists() getLists()
</script> </script>
src/views/user/setting.vue
<!-- 个人资料 --> <!-- 个人资料 -->
<template> <template>
<div class="user-setting"> <div class="user-setting">
<el-card class="!border-none" shadow="never"> <el-card class="!border-none" shadow="never">
<el-form ref="formRef" class="ls-form" :model="formData" :rules="rules" label-width="100px"> <el-form
ref="formRef"
class="ls-form"
<el-form-item label="当前密码：" prop="password_3"> :model="formData"
<div class="w-80"> :rules="rules"
<el-input v-model.trim="formData.password_3" placeholder="修改密码时必填, 不修改密码时留空" type="password" label-width="100px"
show-password /> >
</div> <el-form-item label="当前密码：" prop="password_3">
</el-form-item> <div class="w-80">
<el-input
<el-form-item label="新的密码：" prop="password_1"> v-model.trim="formData.password_3"
<div class="w-80"> placeholder="修改密码时必填, 不修改密码时留空"
<el-input v-model.trim="formData.password_1" placeholder="修改密码时必填, 不修改密码时留空" type="password" type="password"
show-password /> show-password
</div> />
</el-form-item> </div>
</el-form-item>
<el-form-item label="确定密码：" prop="password_2">
<div class="w-80"> <el-form-item label="新的密码：" prop="password_1">
<el-input v-model.trim="formData.password_2" placeholder="修改密码时必填, 不修改密码时留空" type="password" <div class="w-80">
show-password /> <el-input
</div> v-model.trim="formData.password_1"
</el-form-item> placeholder="修改密码时必填, 不修改密码时留空"
</el-form> type="password"
</el-card> show-password
<footer-btns> />
<el-button type="primary" @click="handleSubmit">保存</el-button> </div>
</footer-btns> </el-form-item>
</div>
<el-form-item label="确定密码：" prop="password_2">
<div class="w-80">
<el-input
v-model.trim="formData.password_2"
placeholder="修改密码时必填, 不修改密码时留空"
type="password"
show-password
/>
</div>
</el-form-item>
</el-form>
</el-card>
<footer-btns>
<el-button type="primary" @click="handleSubmit">保存</el-button>
</footer-btns>
</div>
</template> </template>
<script setup lang="ts" name="userSetting"> <script setup lang="ts" name="userSetting">
...@@ -42,81 +58,78 @@ const formRef = ref<FormInstance>() ...@@ -42,81 +58,78 @@ const formRef = ref<FormInstance>()
const userStore = useUserStore() const userStore = useUserStore()
// 表单数据 // 表单数据
const formData = reactive({ const formData = reactive({
password_3: '', // 当前密码 password_3: '', // 当前密码
password_1: '', // 新的密码 password_1: '', // 新的密码
password_2: '' // 确定密码 password_2: '' // 确定密码
}) })
// 表单校验规则 // 表单校验规则
const rules = reactive<object>({ const rules = reactive<object>({
password_1: [ password_1: [
{ {
required: true, required: true,
message: '请输入新的密码', message: '请输入新的密码',
trigger: ['blur'] trigger: ['blur']
} }
], ],
password_2: [ password_2: [
{ {
required: true, required: true,
message: '请输入确定密码', message: '请输入确定密码',
trigger: ['blur'] trigger: ['blur']
} }
], ],
password_3: [ password_3: [
{ {
required: true, required: true,
message: '请输入当前密码', message: '请输入当前密码',
trigger: ['blur'] trigger: ['blur']
} }
] ]
}) })
// 设置个人设置 // 设置个人设置
const setUser = async () => { const setUser = async () => {
if (formData.password_3 || formData.password_1 || formData.password_2) {
if (!formData.password_3) {
return feedback.msgError('请输入当前密码')
}
if (formData.password_3 || formData.password_1 || formData.password_2) { if (!formData.password_1) {
if (!formData.password_3) { return feedback.msgError('请输入新的密码')
return feedback.msgError('请输入当前密码') }
}
if (!formData.password_1) {
return feedback.msgError('请输入新的密码')
}
if (!formData.password_2) { if (!formData.password_2) {
return feedback.msgError('请输入确定密码') return feedback.msgError('请输入确定密码')
} }
if (formData.password_1 != formData.password_2) { if (formData.password_1 != formData.password_2) {
return feedback.msgError('两次输入的密码不一样') return feedback.msgError('两次输入的密码不一样')
}
} }
}
if (formData.password_3 && formData.password_1 && formData.password_2) { if (formData.password_3 && formData.password_1 && formData.password_2) {
if (formData.password_3.length < 6 || formData.password_3.length > 32) { if (formData.password_3.length < 6 || formData.password_3.length > 32) {
return feedback.msgError('密码长度在6到32之间') return feedback.msgError('密码长度在6到32之间')
}
if (formData.password_1.length < 6 || formData.password_1.length > 32) {
return feedback.msgError('密码长度在6到32之间')
}
if (formData.password_2.length < 6 || formData.password_2.length > 32) {
return feedback.msgError('密码长度在6到32之间')
}
} }
if (formData.password_1.length < 6 || formData.password_1.length > 32) {
return feedback.msgError('密码长度在6到32之间')
}
if (formData.password_2.length < 6 || formData.password_2.length > 32) {
return feedback.msgError('密码长度在6到32之间')
}
}
await setUserInfo(formData) await setUserInfo(formData)
feedback.msgSuccess("操作成功"); feedback.msgSuccess('操作成功')
userStore.getUserInfo(); userStore.getUserInfo()
} }
// 提交数据 // 提交数据
const handleSubmit = async () => { const handleSubmit = async () => {
await formRef.value?.validate() await formRef.value?.validate()
setUser() setUser()
} }
</script> </script>
<style lang="scss" scoped></style> <style lang="scss" scoped></style>
src/views/userSave/lists/renderChima.vue
<template> <template>
<div class="edit-popup"> <div class="edit-popup">
<popup ref="popupRef" title="重新生成指定尺码" :async="true" width="800px" @confirm="handleSubmit" @close="handleClose"> <popup
<el-form ref="formRef" :model="formData" label-width="160px" :rules="formRules" class="w-[90%]" v-if="diy"> ref="popupRef"
title="重新生成指定尺码"
<el-form-item label="选择尺码" prop="chima_id"> :async="true"
<el-select v-model="formData.chima_id" placeholder="请选择要生成的尺码"> width="800px"
<el-option :value="item.id" :label="'标题：'+item.title + ' 编码：' + item.bianma" @confirm="handleSubmit"
v-for="item in diy.chimaList"></el-option> @close="handleClose"
</el-select> >
</el-form-item> <el-form
ref="formRef"
<el-form-item label="生成图片格式" prop="sc_img_type"> :model="formData"
<el-radio-group v-model="formData.sc_img_type"> label-width="160px"
<el-radio :label="1">JPG</el-radio> :rules="formRules"
<el-radio :label="2">SVG</el-radio> class="w-[90%]"
<el-radio :label="3">TIFF</el-radio> v-if="diy"
</el-radio-group> >
</el-form-item> <el-form-item label="选择尺码" prop="chima_id">
<el-select
<el-form-item label="额外关联的数据" prop="posts_content"> v-model="formData.chima_id"
<div class="w-full"> placeholder="请选择要生成的尺码"
<el-input v-model="formData.posts_content" placeholder="JSON格式" type="textarea" >
:autosize="{ minRows: 3, maxRows: 3 }" maxlength="200" show-word-limit clearable /> <el-option
<div>非必填，没有可以不写</div> v-for="(item, i) in diy.chimaList"
<div> :value="item.id"
<div>结构演示</div> :label="'标题：' + item.title + ' 编码：' + item.bianma"
[ :key="i"
{ ></el-option>
"name":"素材", </el-select>
"content":"https://img.foxpsd.com/images%2Fth3.jpg" </el-form-item>
}
] <el-form-item label="生成图片格式" prop="sc_img_type">
</div> <el-radio-group v-model="formData.sc_img_type">
</div> <el-radio :label="1">JPG</el-radio>
<el-radio :label="2">SVG</el-radio>
</el-form-item> <el-radio :label="3">TIFF</el-radio>
</el-form> </el-radio-group>
</popup> </el-form-item>
</div>
<el-form-item label="额外关联的数据" prop="posts_content">
<div class="w-full">
<el-input
v-model="formData.posts_content"
placeholder="JSON格式"
type="textarea"
:autosize="{ minRows: 3, maxRows: 3 }"
maxlength="200"
show-word-limit
clearable
/>
<div>非必填，没有可以不写</div>
<div>
<div>结构演示</div>
[ { "name":"素材",
"content":"https://img.foxpsd.com/images%2Fth3.jpg" } ]
</div>
</div>
</el-form-item>
</el-form>
</popup>
</div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import type { FormInstance } from 'element-plus' import type { FormInstance } from 'element-plus'
import { apiDiyTemplateItem } from '@/api/product' import { apiDiyTemplateItem } from '@/api/product'
import { apiDiyUserSaveChimaRender } from "@/api/member"; import { apiDiyUserSaveChimaRender } from '@/api/member'
import Popup from '@/components/popup/index.vue' import Popup from '@/components/popup/index.vue'
const emit = defineEmits(['success', 'close']) const emit = defineEmits(['success', 'close'])
...@@ -53,81 +74,76 @@ const popupRef = shallowRef<InstanceType<typeof Popup>>() ...@@ -53,81 +74,76 @@ const popupRef = shallowRef<InstanceType<typeof Popup>>()
const mode = ref('add') const mode = ref('add')
const formData = reactive({ const formData = reactive({
chima_id: '', chima_id: '',
sku:'', sku: '',
posts_content: '', posts_content: '',
sc_img_type:1 sc_img_type: 1
}) })
const formRules: any = reactive({ const formRules: any = reactive({
chima_id: [ chima_id: [
{ {
required: true, required: true,
message: '请选择尺码', message: '请选择尺码',
trigger: 'blur' trigger: 'blur'
} }
] ]
}) })
const handleSubmit = async () => { const handleSubmit = async () => {
await formRef.value?.validate(); await formRef.value?.validate()
let obj: any = { ...toRaw(formData) }; const obj: any = { ...toRaw(formData) }
if(obj.posts_content){ if (obj.posts_content) {
obj.posts = JSON.parse(obj.posts_content); obj.posts = JSON.parse(obj.posts_content)
delete obj.posts_content; delete obj.posts_content
} }
await apiDiyUserSaveChimaRender(obj) await apiDiyUserSaveChimaRender(obj)
popupRef.value?.close() popupRef.value?.close()
emit('success') emit('success')
} }
const userSaveItem = ref(); const userSaveItem = ref()
const diy = ref(); const diy = ref()
const getData = async (sku: string) => { const getData = async (sku: string) => {
let res = await apiDiyTemplateItem({ const res = await apiDiyTemplateItem({
sku sku
}) })
diy.value = res.data diy.value = res.data
formData.sc_img_type = diy.value.sc_img_type formData.sc_img_type = diy.value.sc_img_type
} }
const open = (key = 'add', row: any) => { const open = (key = 'add', row: any) => {
userSaveItem.value = row; userSaveItem.value = row
formData.sku = row.sku; formData.sku = row.sku
getData(row.db_diy.sku) getData(row.db_diy.sku)
mode.value = key mode.value = key
popupRef.value?.open(); popupRef.value?.open()
} }
const setFormData = (data: Record<any, any>) => { const setFormData = (data: Record<any, any>) => {
for (const key in formData) { for (const key in formData) {
if (data[key] != null && data[key] != undefined) { if (data[key] != null && data[key] != undefined) {
//@ts-ignore //@ts-ignore
formData[key] = data[key] formData[key] = data[key]
}
} }
}
} }
const getDetail = async (row: Record<string, any>) => { const getDetail = async (row: Record<string, any>) => {
setFormData(row); setFormData(row)
} }
const handleClose = () => { const handleClose = () => {
emit('close') emit('close')
} }
defineExpose({ defineExpose({
open, open,
setFormData, setFormData,
getDetail getDetail
}) })
</script> </script>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment