Skip to content

C
customisation-management_front
Commit db60a6f0 by qinjianhui
Options

fix: 格式化代码

parent ee8406a7
Showing with 1492 additions and 1232 deletions
src/api/product.ts
import request from '@/utils/request'
//设计产品/成品/系统素材三级分类列表
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) {
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) {
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) {
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) {
return request.post({ url: '/shop/type/changeTop', params })
return request.post({ url: '/shop/type/changeTop', params })
}
//模板列表
export function foxpsdDiyTemplateListFindAndCountAll(params: Record<string, any>) {
return request.post({ url: '/api/diy/template/listFindAndCountAll', params })
export function foxpsdDiyTemplateListFindAndCountAll(
params: Record<string, any>
) {
return request.post({ url: '/api/diy/template/listFindAndCountAll', params })
}
//foxpsd 模板详情
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) {
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) {
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) {
return request.post({ url: '/api/diy/template/create', params })
return request.post({ url: '/api/diy/template/create', params })
}
// 模板创建
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) {
return request.post({ url: '/api/diy/template/delete', params })
return request.post({ url: '/api/diy/template/delete', params })
}
// 模板详情
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) {
return request.post({ url: '/api/diy/template/status', params })
return request.post({ url: '/api/diy/template/status', params })
}
// 模板绑定用户
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) {
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) {
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) {
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) {
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) {
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) {
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) {
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) {
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) {
return request.post({ url: '/api/psd/parser', params })
return request.post({ url: '/api/psd/parser', params })
}
// 颜色
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) {
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) {
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) {
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) {
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) {
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) {
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) {
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'
import {
apiDiyTemplateUpdate,
apiDiyTemplateCreate,
apiDiyTemplateBindDiy,
apiDiyTemplateBindDiy
} from '@/api/product'
import Popup from '@/components/popup/index.vue'
import { getImageUrl } from '@/utils/getImgUrl'
......@@ -80,7 +80,7 @@ const mobanList: any = ref([])
const formData = reactive({
id: '',
diy_ids: '', //待绑定的模板
default_diy_id: '',
default_diy_id: ''
})
const formRules: any = reactive({
......@@ -88,9 +88,9 @@ const formRules: any = reactive({
{
required: true,
message: '请输入标签名称',
trigger: 'blur',
},
],
trigger: 'blur'
}
]
})
const templateChange = (e: any) => {
......@@ -150,6 +150,6 @@ const handleClose = () => {
defineExpose({
open,
setFormData,
getDetail,
getDetail
})
</script>
src/views/product/lists/edit.vue
<template>
<div class="edit-popup">
<popup ref="popupRef" :title="popupTitle" :async="true" width="700px" @confirm="handleSubmit" @close="handleClose">
<el-form ref="formRef" :model="formData" label-width="120px" :rules="formRules">
<el-form-item label="模板名称" prop="title">
<el-input v-model="formData.title" placeholder="请输入模板名称" clearable />
</el-form-item>
<el-form-item label="产品主图" prop="img_url">
<div>
<div>
<material-picker v-model="formData.img_url" :limit="1" />
</div>
<div class="form-tips">建议尺寸1000*1000px</div>
</div>
</el-form-item>
<el-form-item label="分类" prop="type_id">
<el-cascader v-model="formData.type_id" :options="type_list" :props="{ label: 'title', value: 'id' }" />
</el-form-item>
<el-form-item label="自定义编码" prop="bianma">
<el-input v-model="formData.bianma" placeholder="请输入自定义编码" clearable />
<div class=" text-xs">自定义编码会合成到生产图中（英文或数字）</div>
</el-form-item>
<el-form-item label="生产图格式" prop="sc_img_type">
<div>
<el-radio-group v-model="formData.sc_img_type">
<el-radio :label="1">JPG</el-radio>
<el-radio :label="2">SVG</el-radio>
<el-radio :label="3">TIFF</el-radio>
</el-radio-group>
<div class=" text-xs">没特殊需求，请选择方法jpg及svg，其中svg性能最好</div>
</div>
</el-form-item>
<el-form-item label="尺码图是否立即生成" prop="chima_now_render">
<div>
<el-radio-group v-model="formData.chima_now_render">
<el-radio :label="0">后续生成</el-radio>
<el-radio :label="1">立刻生成</el-radio>
</el-radio-group>
<div class=" text-xs">默认为【后续生成】，可以通过接口等用户下单后再去合成</div>
</div>
</el-form-item>
<el-form-item label="排序" prop="idx">
<div>
<el-input-number v-model="formData.idx" :min="1" :max="9999" />
<div class="form-tips">默认为1， 数值越小越排前</div>
</div>
</el-form-item>
<el-form-item label="描述" prop="content">
<el-input v-model="formData.content" placeholder="请输入描述" type="textarea"
:autosize="{ minRows: 3, maxRows: 3 }" maxlength="200" show-word-limit clearable />
</el-form-item>
</el-form>
</popup>
</div>
<div class="edit-popup">
<popup
ref="popupRef"
:title="popupTitle"
:async="true"
width="700px"
@confirm="handleSubmit"
@close="handleClose"
>
<el-form
ref="formRef"
:model="formData"
label-width="120px"
:rules="formRules"
>
<el-form-item label="模板名称" prop="title">
<el-input
v-model="formData.title"
placeholder="请输入模板名称"
clearable
/>
</el-form-item>
<el-form-item label="产品主图" prop="img_url">
<div>
<div>
<material-picker v-model="formData.img_url" :limit="1" />
</div>
<div class="form-tips">建议尺寸1000*1000px</div>
</div>
</el-form-item>
<el-form-item label="分类" prop="type_id">
<el-cascader
v-model="formData.type_id"
:options="type_list"
:props="{ label: 'title', value: 'id' }"
/>
</el-form-item>
<el-form-item label="自定义编码" prop="bianma">
<el-input
v-model="formData.bianma"
placeholder="请输入自定义编码"
clearable
/>
<div class="text-xs">自定义编码会合成到生产图中（英文或数字）</div>
</el-form-item>
<el-form-item label="生产图格式" prop="sc_img_type">
<div>
<el-radio-group v-model="formData.sc_img_type">
<el-radio :label="1">JPG</el-radio>
<el-radio :label="2">SVG</el-radio>
<el-radio :label="3">TIFF</el-radio>
</el-radio-group>
<div class="text-xs">
没特殊需求，请选择方法jpg及svg，其中svg性能最好
</div>
</div>
</el-form-item>
<el-form-item label="尺码图是否立即生成" prop="chima_now_render">
<div>
<el-radio-group v-model="formData.chima_now_render">
<el-radio :label="0">后续生成</el-radio>
<el-radio :label="1">立刻生成</el-radio>
</el-radio-group>
<div class="text-xs">
默认为【后续生成】，可以通过接口等用户下单后再去合成
</div>
</div>
</el-form-item>
<el-form-item label="排序" prop="idx">
<div>
<el-input-number v-model="formData.idx" :min="1" :max="9999" />
<div class="form-tips">默认为1， 数值越小越排前</div>
</div>
</el-form-item>
<el-form-item label="描述" prop="content">
<el-input
v-model="formData.content"
placeholder="请输入描述"
type="textarea"
:autosize="{ minRows: 3, maxRows: 3 }"
maxlength="200"
show-word-limit
clearable
/>
</el-form-item>
</el-form>
</popup>
</div>
</template>
<script lang="ts" setup>
import type { FormInstance } from 'element-plus'
import { shopTypeList, apiDiyTemplateUpdate, apiDiyTemplateCreate } from '@/api/product'
import {
shopTypeList,
apiDiyTemplateUpdate,
apiDiyTemplateCreate
} from '@/api/product'
import Popup from '@/components/popup/index.vue'
const emit = defineEmits(['success', 'close'])
......@@ -75,119 +110,116 @@ const formRef = shallowRef<FormInstance>()
const popupRef = shallowRef<InstanceType<typeof Popup>>()
const mode = ref('add')
const popupTitle = computed(() => {
return mode.value == 'edit' ? '编辑模板' : '新增模板'
return mode.value == 'edit' ? '编辑模板' : '新增模板'
})
const formData = reactive({
id: '',
title: '',
idx: 1,
img_url: '',
type_id: '',
bianma: '',
content: '',
sc_img_type: 1, // 1 JPG 2 SVG
chima_now_render:0
id: '',
title: '',
idx: 1,
img_url: '',
type_id: '',
bianma: '',
content: '',
sc_img_type: 1, // 1 JPG 2 SVG
chima_now_render: 0
})
const formRules: any = reactive({
title: [
{
required: true,
message: '请输入标签名称',
trigger: 'blur'
}
],
idx: [
{
required: true,
message: '请输入排序',
trigger: 'blur'
}
],
img_url: [
{
required: true,
message: '主图',
trigger: 'blur'
}
],
type_id: [
{
required: true,
message: '分类',
trigger: 'blur'
}
],
bianma: [
{
required: true,
message: '自定义编码',
trigger: 'blur'
}
],
sc_img_type: [
{
required: true,
message: '生产图输出格式',
trigger: 'blur'
}
]
title: [
{
required: true,
message: '请输入标签名称',
trigger: 'blur'
}
],
idx: [
{
required: true,
message: '请输入排序',
trigger: 'blur'
}
],
img_url: [
{
required: true,
message: '主图',
trigger: 'blur'
}
],
type_id: [
{
required: true,
message: '分类',
trigger: 'blur'
}
],
bianma: [
{
required: true,
message: '自定义编码',
trigger: 'blur'
}
],
sc_img_type: [
{
required: true,
message: '生产图输出格式',
trigger: 'blur'
}
]
})
const handleSubmit = async () => {
await formRef.value?.validate();
await formRef.value?.validate()
let obj: any = { ...toRaw(formData) };
if (obj.id === '') delete obj.id
const obj: any = { ...toRaw(formData) }
if (obj.id === '') delete obj.id
if (obj.type_id && obj.type_id.length > 0) {
obj.type_id = obj.type_id[obj.type_id.length - 1]
}
if (obj.type_id && obj.type_id.length > 0) {
obj.type_id = obj.type_id[obj.type_id.length - 1]
}
mode.value == 'edit' ? await apiDiyTemplateUpdate(obj) : await apiDiyTemplateCreate(obj)
popupRef.value?.close()
emit('success')
mode.value == 'edit'
? await apiDiyTemplateUpdate(obj)
: await apiDiyTemplateCreate(obj)
popupRef.value?.close()
emit('success')
}
const type_list = ref([]);
const type_list = ref([])
const getData = async () => {
let res = await shopTypeList()
console.log(res)
type_list.value = res.data.list;
const res = await shopTypeList()
console.log(res)
type_list.value = res.data.list
}
const open = async (key = 'add') => {
mode.value = key
popupRef.value?.open();
await getData()
mode.value = key
popupRef.value?.open()
await getData()
}
const setFormData = (data: Record<any, any>) => {
for (const key in formData) {
if (data[key] != null && data[key] != undefined) {
//@ts-ignore
formData[key] = data[key]
}
for (const key in formData) {
if (data[key] != null && data[key] != undefined) {
//@ts-ignore
formData[key] = data[key]
}
}
}
const getDetail = async (row: Record<string, any>) => {
setFormData(row);
setFormData(row)
}
const handleClose = () => {
emit('close')
emit('close')
}
defineExpose({
open,
setFormData,
getDetail
open,
setFormData,
getDetail
})
</script>
src/views/product/lists/index.vue
<template>
<div class="article-lists">
<el-card class="!border-none" shadow="never">
<el-form ref="formRef" class="mb-[-16px]" @submit.native.prevent :model="queryParams" :inline="true">
<el-form-item label="编号/标题">
<el-input class="w-[280px]" v-model="queryParams.content" clearable @keyup.enter="resetPage" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="resetPage">查询</el-button>
<el-button @click="resetParams">重置</el-button>
</el-form-item>
</el-form>
</el-card>
<el-card class="!border-none mt-4" shadow="never">
<div class="flex justify-between">
<div class="flex mb-4">
<el-button type="primary" @click="handleAdd">
<template #icon>
<icon name="el-icon-Plus" />
</template>
添加模板
</el-button>
<el-button @click="handleExpand"> 展开/折叠 </el-button>
<div class="article-lists">
<el-card class="!border-none" shadow="never">
<el-form
ref="formRef"
class="mb-[-16px]"
@submit.native.prevent
:model="queryParams"
:inline="true"
>
<el-form-item label="编号/标题">
<el-input
class="w-[280px]"
v-model="queryParams.content"
clearable
@keyup.enter="resetPage"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="resetPage">查询</el-button>
<el-button @click="resetParams">重置</el-button>
</el-form-item>
</el-form>
</el-card>
<el-card class="!border-none mt-4" shadow="never">
<div class="flex justify-between">
<div class="flex mb-4">
<el-button type="primary" @click="handleAdd">
<template #icon>
<icon name="el-icon-Plus" />
</template>
添加模板
</el-button>
<el-button @click="handleExpand"> 展开/折叠 </el-button>
</div>
<pagination v-model="pager" @change="getLists" />
</div>
<el-table
ref="tableRef"
class="mt20"
@selection-change="handleSelectionChange"
size="large"
v-loading="pager.loading"
:data="pager.lists"
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
row-key="id"
>
<el-table-column type="selection" width="55" />
<el-table-column label="展开">
<template #default="{ row }">
<span v-if="row.children && row.children.length > 0"
>关联模板数： {{ row.children.length }}</span
>
</template>
</el-table-column>
<el-table-column label="SKU" width="180">
<template #default="{ row }">
<div class="two" v-copy="row.sku">
{{ row.sku }}
<icon
class="ml-2"
:size="14"
color="#38f"
name="el-icon-DocumentCopy"
/>
</div>
</template>
</el-table-column>
<el-table-column label="商品信息">
<template #default="{ row }">
<div class="flex relative">
<image-contain
v-if="row.img_url"
:src="getImageUrl(row.img_url, 200)"
:width="100"
:height="100"
:preview-src-list="[row.img_url]"
preview-teleported
fit="contain"
/>
<div class="goodsInfo ml-4">
<div class="title">{{ row.title }}</div>
<div class="mt-2">
<div class="flex">
<div class="one">分类：</div>
<div class="two">
<span v-if="row.db_diy_type">{{
row.db_diy_type.title
}}</span>
</div>
</div>
</div>
<pagination v-model="pager" @change="getLists" />
</div>
</div>
</template>
</el-table-column>
<el-table-column label="编码" prop="bianma" min-width="40" />
<el-table-column label="排序" prop="idx" min-width="40" />
<el-table-column label="生产图生成格式">
<template #default="{ row }">
<el-tag v-if="row.sc_img_type == 1">JPG</el-tag>
<el-tag v-if="row.sc_img_type == 2">SVG</el-tag>
<el-tag v-if="row.sc_img_type == 3">TIFF</el-tag>
</template>
</el-table-column>
<el-table-column label="尺码图是否立即生成">
<template #default="{ row }">
<el-tag v-if="row.chima_now_render == 1">立刻生成</el-tag>
<el-tag v-else>后续生成</el-tag>
</template>
</el-table-column>
<el-table-column label="创建时间" prop="create_date" />
<el-table-column label="上下架">
<template #default="{ row }">
<el-switch
v-model="row.status"
:active-value="1"
:inactive-value="0"
@change="changeStatus($event as number, row.id)"
/>
</template>
</el-table-column>
<el-table-column label="操作" width="120" fixed="right">
<template #default="{ row }">
<div>
<el-button type="primary" link>
<router-link
:to="{
path: '/product/face',
query: {
did: row.id
}
}"
>
创建层面
</router-link>
</el-button>
</div>
<div>
<el-button type="primary" link>
<router-link
:to="{
path: '/product/xiaoguotu',
query: {
did: row.id
}
}"
>
创建效果图
</router-link>
</el-button>
</div>
<el-table ref="tableRef" class="mt20" @selection-change="handleSelectionChange" size="large" v-loading="pager.loading"
:data="pager.lists" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" row-key="id">
<el-table-column type="selection" width="55" />
<el-table-column label="展开">
<template #default="{ row }">
<span v-if="row.children && row.children.length >0">关联模板数： {{ row.children.length }}</span>
</template>
</el-table-column>
<el-table-column label="SKU" width="180">
<template #default="{ row }">
<div class="two" v-copy="row.sku">
{{ row.sku }}
<icon class="ml-2" :size="14" color="#38f" name="el-icon-DocumentCopy" />
</div>
</template>
</el-table-column>
<el-table-column label="商品信息">
<template #default="{ row }">
<div class="flex relative">
<image-contain v-if="row.img_url" :src="getImageUrl(row.img_url, 200)" :width="100" :height="100"
:preview-src-list="[row.img_url]" preview-teleported
fit="contain" />
<div class="goodsInfo ml-4">
<div class="title">{{ row.title }}</div>
<div class="mt-2">
<div class="flex">
<div class="one">分类：</div>
<div class="two">
<span v-if="row.db_diy_type">{{ row.db_diy_type.title}}</span>
</div>
</div>
</div>
</div>
</div>
</template>
</el-table-column>
<el-table-column label="编码" prop="bianma" min-width="40" />
<el-table-column label="排序" prop="idx" min-width="40" />
<el-table-column label="生产图生成格式">
<template #default="{ row }">
<el-tag v-if="row.sc_img_type==1">JPG</el-tag>
<el-tag v-if="row.sc_img_type==2">SVG</el-tag>
<el-tag v-if="row.sc_img_type==3">TIFF</el-tag>
</template>
</el-table-column>
<el-table-column label="尺码图是否立即生成">
<template #default="{ row }">
<el-tag v-if="row.chima_now_render==1">立刻生成</el-tag>
<el-tag v-else>后续生成</el-tag>
</template>
</el-table-column>
<el-table-column label="创建时间" prop="create_date"/>
<el-table-column label="上下架">
<template #default="{ row }">
<el-switch v-model="row.status" :active-value="1" :inactive-value="0"
@change="changeStatus($event as number, row.id)" />
</template>
</el-table-column>
<el-table-column label="操作" width="120" fixed="right">
<template #default="{ row }">
<div>
<el-button type="primary" link>
<router-link :to="{
path: '/product/face',
query: {
did: row.id
}
}">
创建层面
</router-link>
</el-button>
</div>
<div>
<el-button type="primary" link>
<router-link :to="{
path: '/product/xiaoguotu',
query: {
did: row.id
}
}">
创建效果图
</router-link>
</el-button>
</div>
<div>
<el-button type="primary" link>
<router-link :to="{
path: '/product/chima',
query: {
did: row.id
}
}">
创建尺码
</router-link>
</el-button>
</div>
<div class=" mt-3">
<el-button type="primary" link @click="handleEdit(row)">
编辑
</el-button>
</div>
<div v-if="!row.parent_id">
<el-button type="primary" link @click="handleEdit(row,'bindDiy')">
绑定模板
</el-button>
</div>
<div v-if="row.children && row.children.length>0">
<el-button type="primary" link @click="unbindDiy(row)">
解绑模板
</el-button>
</div>
<div class="">
<el-button type="danger" link @click="handleDelete(row.id)">
删除
</el-button>
</div>
</template>
</el-table-column>
</el-table>
<div class="flex justify-end mt-4">
<pagination v-model="pager" @change="getLists" />
<div>
<el-button type="primary" link>
<router-link
:to="{
path: '/product/chima',
query: {
did: row.id
}
}"
>
创建尺码
</router-link>
</el-button>
</div>
</el-card>
<edit-popup v-if="showEdit" ref="editRef" @success="getLists" @close="showEdit = false" />
<div class="mt-3">
<el-button type="primary" link @click="handleEdit(row)">
编辑
</el-button>
</div>
<div v-if="!row.parent_id">
<el-button
type="primary"
link
@click="handleEdit(row, 'bindDiy')"
>
绑定模板
</el-button>
</div>
<bind-diy-popup ref="bindDiyRef" v-if="showEdit2" @success="getLists" @close="showEdit2 = false" />
<div v-if="row.children && row.children.length > 0">
<el-button type="primary" link @click="unbindDiy(row)">
解绑模板
</el-button>
</div>
</div>
<div class="">
<el-button type="danger" link @click="handleDelete(row.id)">
删除
</el-button>
</div>
</template>
</el-table-column>
</el-table>
<div class="flex justify-end mt-4">
<pagination v-model="pager" @change="getLists" />
</div>
</el-card>
<edit-popup
v-if="showEdit"
ref="editRef"
@success="getLists"
@close="showEdit = false"
/>
<bind-diy-popup
ref="bindDiyRef"
v-if="showEdit2"
@success="getLists"
@close="showEdit2 = false"
/>
</div>
</template>
<script lang="ts" setup name="productLists">
import {
foxpsdDiyTemplateListFindAndCountAll,
apiDiyTemplateDelete,
apiDiyTemplateStatus,
apiDiyTemplateUnbindDiy
import {
foxpsdDiyTemplateListFindAndCountAll,
apiDiyTemplateDelete,
apiDiyTemplateStatus,
apiDiyTemplateUnbindDiy
} from '@/api/product'
import { usePaging } from '@/hooks/usePaging'
import feedback from '@/utils/feedback'
import { getImageUrl } from "@/utils/getImgUrl";
import BindDiyPopup from "./bindDiy.vue"
import { getImageUrl } from '@/utils/getImgUrl'
import BindDiyPopup from './bindDiy.vue'
import EditPopup from './edit.vue'
import type { ElTable } from 'element-plus'
const editRef = shallowRef<InstanceType<typeof EditPopup>>()
const bindDiyRef = shallowRef<InstanceType<typeof BindDiyPopup>>()
const showEdit = ref(false)
......@@ -195,154 +249,145 @@ let isExpand = false
const tableRef = shallowRef<InstanceType<typeof ElTable>>()
const queryParams = reactive({
content: '',
type: 'all',
have_all:0
content: '',
type: 'all',
have_all: 0
})
const { pager, getLists, resetPage, resetParams } = usePaging({
fetchFun: foxpsdDiyTemplateListFindAndCountAll,
params: queryParams
fetchFun: foxpsdDiyTemplateListFindAndCountAll,
params: queryParams
})
const selectData = ref<any[]>([])
const handleSelectionChange = (val: any[]) => {
selectData.value = val.map(({ id }) => id)
selectData.value = val.map(({ id }) => id)
}
const handleAdd = async () => {
showEdit.value = true;
await nextTick();
editRef.value?.open('add');
showEdit.value = true
await nextTick()
editRef.value?.open('add')
}
const handleEdit = async (data: any,key='edit') => {
if(key=='edit'){
showEdit.value = true;
await nextTick();
editRef.value?.open('edit');
editRef.value?.getDetail(data)
}else{
showEdit2.value = true;
await nextTick();
bindDiyRef.value?.open('edit');
bindDiyRef.value?.getDetail(data)
}
const handleEdit = async (data: any, key = 'edit') => {
if (key == 'edit') {
showEdit.value = true
await nextTick()
editRef.value?.open('edit')
editRef.value?.getDetail(data)
} else {
showEdit2.value = true
await nextTick()
bindDiyRef.value?.open('edit')
bindDiyRef.value?.getDetail(data)
}
}
const unbindDiy = async (row:any)=>{
await feedback.confirm('确定要解绑吗？')
let res = await apiDiyTemplateUnbindDiy({
id:row.id
})
getLists()
const unbindDiy = async (row: any) => {
await feedback.confirm('确定要解绑吗？')
const res = await apiDiyTemplateUnbindDiy({
id: row.id
})
getLists()
}
//上下架
const changeStatus = async (status: number, id: number) => {
try {
await apiDiyTemplateStatus({ id, status })
getLists()
} catch (error) {
getLists()
}
try {
await apiDiyTemplateStatus({ id, status })
getLists()
} catch (error) {
getLists()
}
}
const handleExpand = () => {
isExpand = !isExpand
toggleExpand(pager.lists, isExpand)
isExpand = !isExpand
toggleExpand(pager.lists, isExpand)
}
const toggleExpand = (children: any[], unfold = true) => {
for (const key in children) {
tableRef.value?.toggleRowExpansion(children[key], unfold)
if (children[key].list) {
toggleExpand(children[key].list!, unfold)
}
for (const key in children) {
tableRef.value?.toggleRowExpansion(children[key], unfold)
if (children[key].list) {
toggleExpand(children[key].list!, unfold)
}
}
}
const handleDelete = async (id: number) => {
await feedback.confirm('确定要删除？')
await apiDiyTemplateDelete({ id})
getLists()
await feedback.confirm('确定要删除？')
await apiDiyTemplateDelete({ id })
getLists()
}
onActivated(() => {
getLists()
getLists()
})
onMounted(() => {
getLists()
getLists()
})
</script>
<style lang="scss" scoped>
.goodsInfo {
.title {
font-weight: bold;
}
.title {
font-weight: bold;
}
}
:deep(.el-table__row--level-1) {
--el-table-tr-bg-color: var(--el-color-warning-light-9);
--el-table-tr-bg-color: var(--el-color-warning-light-9);
}
.foxpsd_box {
.zhutu_data {
display: flex;
align-items: flex-start;
justify-content: space-between;
.right_txt {
font-size: 16px;
font-weight: bold;
color: #333;
.ts {
color: #666;
font-weight: 400;
}
}
.zhutu_data {
display: flex;
align-items: flex-start;
justify-content: space-between;
.right_txt {
font-size: 16px;
font-weight: bold;
color: #333;
.ts {
color: #666;
font-weight: 400;
}
}
}
.boy_detail {
margin-bottom: 20px;
.boy_biaoti {
font-size: 16px;
color: #38f;
}
.img_list {
display: flex;
flex-wrap: wrap;
.boy_detail {
margin-bottom: 20px;
.item_xiaoguo {
text-align: center;
font-size: 14px;
margin-bottom: 5px;
margin-right: 5px;
}
}
.boy_biaoti {
font-size: 16px;
color: #38f;
}
.img_list {
display: flex;
flex-wrap: wrap;
.item_xiaoguo {
text-align: center;
font-size: 14px;
margin-bottom: 5px;
margin-right: 5px;
}
}
}
}
.nav_her_btn {
display: flex;
align-items: center;
justify-content: flex-end;
font-size: 18px;
color: #38f;
cursor: pointer;
display: flex;
align-items: center;
justify-content: flex-end;
font-size: 18px;
color: #38f;
cursor: pointer;
}
</style>
\ No newline at end of file
</style>
src/views/product/xiaoguotu/edit.vue
<template>
<div class="edit-popup">
<popup ref="popupRef" :title="popupTitle" :async="true" width="1000px" @confirm="handleSubmit" @close="handleClose">
<el-form ref="formRef" :model="formData" label-width="140px" :rules="formRules">
<el-row :gutter="20">
<el-col :span="14">
<el-form-item label="名称" prop="title">
<el-input v-model="formData.title" placeholder="请输入名称" clearable />
</el-form-item>
<el-form-item label="排序" prop="idx">
<div>
<el-input-number v-model="formData.idx" :min="1" :max="9999" />
<div class="form-tips">默认为1， 数值越小越排前</div>
</div>
</el-form-item>
<el-form-item label="颜色" prop="color_id">
<el-select v-model="formData.color_id">
<el-option value="">不绑定颜色</el-option>
<el-option :label="item.title" :value="item.id" v-for="item in colorList" :key="item.id"/>
</el-select>
</el-form-item>
<el-form-item class="!mb-0">
<div>
<upload :multiple="false" :action="`${config.baseUrl}/api/v1/upload`" @change="onChange"
@error="onError" type="psd" :saveFoxpsd="false" :show-progress="true">
<el-button :loading="uploadPsdLoading" type="primary">上传PSD文件</el-button>
</upload>
<div>上传时间较长，请耐心等待</div>
</div>
</el-form-item>
<el-form-item label="PSD文件" prop="psd_url">
<el-input v-model="formData.psd_url" placeholder="psd 文件路径" clearable disabled />
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="主图" prop="img_url">
<div>
<div>
<material-picker v-model="formData.img_url" :limit="1" />
</div>
<div class="text-xs">png,jpg,jpeg等格式，最大为100kb,750*750像素</div>
</div>
</el-form-item>
</el-col>
</el-row>
</el-form>
</popup>
</div>
<div class="edit-popup">
<popup
ref="popupRef"
:title="popupTitle"
:async="true"
width="1000px"
@confirm="handleSubmit"
@close="handleClose"
>
<el-form
ref="formRef"
:model="formData"
label-width="140px"
:rules="formRules"
>
<el-row :gutter="20">
<el-col :span="14">
<el-form-item label="名称" prop="title">
<el-input
v-model="formData.title"
placeholder="请输入名称"
clearable
/>
</el-form-item>
<el-form-item label="排序" prop="idx">
<div>
<el-input-number v-model="formData.idx" :min="1" :max="9999" />
<div class="form-tips">默认为1， 数值越小越排前</div>
</div>
</el-form-item>
<el-form-item label="颜色" prop="color_id">
<el-select v-model="formData.color_id">
<el-option value="">不绑定颜色</el-option>
<el-option
:label="item.title"
:value="item.id"
v-for="item in colorList"
:key="item.id"
/>
</el-select>
</el-form-item>
<el-form-item class="!mb-0">
<div>
<upload
:multiple="false"
:action="`${config.baseUrl}/api/v1/upload`"
@change="onChange"
@error="onError"
type="psd"
:saveFoxpsd="false"
:show-progress="true"
>
<el-button :loading="uploadPsdLoading" type="primary"
>上传PSD文件</el-button
>
</upload>
<div>上传时间较长，请耐心等待</div>
</div>
</el-form-item>
<el-form-item label="PSD文件" prop="psd_url">
<el-input
v-model="formData.psd_url"
placeholder="psd 文件路径"
clearable
disabled
/>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="主图" prop="img_url">
<div>
<div>
<material-picker v-model="formData.img_url" :limit="1" />
</div>
<div class="text-xs">
png,jpg,jpeg等格式，最大为100kb,750*750像素
</div>
</div>
</el-form-item>
</el-col>
</el-row>
</el-form>
</popup>
</div>
</template>
<script lang="ts" setup>
import type { FormInstance } from 'element-plus'
import {
apiDiyTemplateXiaoguotuUpdate,
apiDiyTemplateXiaoguotuCreate,
apiPsdParser,
apiDiyTemplateColorList
import {
apiDiyTemplateXiaoguotuUpdate,
apiDiyTemplateXiaoguotuCreate,
apiPsdParser,
apiDiyTemplateColorList
} from '@/api/product'
import Popup from '@/components/popup/index.vue'
import config from '@/config'
import feedback from '@/utils/feedback'
const emit = defineEmits(['success', 'close'])
const formRef = shallowRef<FormInstance>()
const popupRef = shallowRef<InstanceType<typeof Popup>>()
const mode = ref('add')
const popupTitle = computed(() => {
return mode.value == 'edit' ? '编辑效果图' : '新增效果图'
return mode.value == 'edit' ? '编辑效果图' : '新增效果图'
})
const route = useRoute();
const route = useRoute()
const uploadPsdLoading = ref(false)
const formData = reactive({
id: '',
title: '',
idx: 1,
img_url: '',
psd_url: '',
psd_svg: '',
psd_txt: '',
color_id: '',
dpi: '',
width: '',
height: '',
diy_id: route.query.did
id: '',
title: '',
idx: 1,
img_url: '',
psd_url: '',
psd_svg: '',
psd_txt: '',
color_id: '',
dpi: '',
width: '',
height: '',
diy_id: route.query.did
})
const formRules: any = reactive({
title: [
{
required: true,
message: '请输入标签名称',
trigger: 'blur'
}
],
idx: [
{
required: true,
message: '请输入排序',
trigger: 'blur'
}
],
width: [
{
required: true,
message: '宽度',
trigger: 'blur'
}
],
height: [
{
required: true,
message: '高度',
trigger: 'blur'
}
],
img_url: [
{
required: true,
message: '主图',
trigger: 'blur'
}
],
mask_url: [
{
required: true,
message: '蒙版图',
trigger: 'blur'
}
]
title: [
{
required: true,
message: '请输入标签名称',
trigger: 'blur'
}
],
idx: [
{
required: true,
message: '请输入排序',
trigger: 'blur'
}
],
width: [
{
required: true,
message: '宽度',
trigger: 'blur'
}
],
height: [
{
required: true,
message: '高度',
trigger: 'blur'
}
],
img_url: [
{
required: true,
message: '主图',
trigger: 'blur'
}
],
mask_url: [
{
required: true,
message: '蒙版图',
trigger: 'blur'
}
]
})
const onChange = async (e: any) => {
console.log(e);
uploadPsdLoading.value = true;
let relativePath = e.response.data.relativePath;
let res = await apiPsdParser({
lianjie: relativePath,
upload: 'oss'
})
if (res.data.width > 1600 || res.data.height > 1600) {
feedback.msgError("psd 最大可上传1600*1600像素");
return
}
formData.img_url = res.data.img_url;
formData.psd_url = res.data.relativePath;
formData.psd_svg = res.data.svg;
formData.psd_txt = res.data.txt;
formData.dpi = res.data.dpi;
formData.width = res.data.width;
formData.height = res.data.height;
uploadPsdLoading.value = false;
console.log(e)
uploadPsdLoading.value = true
const relativePath = e.response.data.relativePath
const res = await apiPsdParser({
lianjie: relativePath,
upload: 'oss'
})
if (res.data.width > 1600 || res.data.height > 1600) {
feedback.msgError('psd 最大可上传1600*1600像素')
return
}
formData.img_url = res.data.img_url
formData.psd_url = res.data.relativePath
formData.psd_svg = res.data.svg
formData.psd_txt = res.data.txt
formData.dpi = res.data.dpi
formData.width = res.data.width
formData.height = res.data.height
uploadPsdLoading.value = false
}
const onError = (e: any) => {
console.log(e);
console.log(e)
}
const handleSubmit = async () => {
await formRef.value?.validate();
await formRef.value?.validate()
let obj: any = { ...toRaw(formData) };
const obj: any = { ...toRaw(formData) }
if (obj.id === '') delete obj.id
if (obj.id) delete obj.diy_id
if (obj.id === '') delete obj.id
if (obj.id) delete obj.diy_id
mode.value == 'edit' ? await apiDiyTemplateXiaoguotuUpdate(obj) : await apiDiyTemplateXiaoguotuCreate(obj)
popupRef.value?.close()
emit('success')
mode.value == 'edit'
? await apiDiyTemplateXiaoguotuUpdate(obj)
: await apiDiyTemplateXiaoguotuCreate(obj)
popupRef.value?.close()
emit('success')
}
const colorList:any= ref([]);
const colorList: any = ref([])
const getData = async () => {
let res:any = await apiDiyTemplateColorList({
diy_id: route.query.did
})
colorList.value = res.data.list;
const res: any = await apiDiyTemplateColorList({
diy_id: route.query.did
})
colorList.value = res.data.list
}
const open = async (key = 'add', pager: any) => {
mode.value = key
popupRef.value?.open();
await getData();
mode.value = key
popupRef.value?.open()
await getData()
}
const setFormData = (data: Record<any, any>) => {
for (const key in formData) {
if (data[key] != null && data[key] != undefined) {
//@ts-ignore
formData[key] = data[key]
}
for (const key in formData) {
if (data[key] != null && data[key] != undefined) {
//@ts-ignore
formData[key] = data[key]
}
}
}
const getDetail = async (row: Record<string, any>) => {
setFormData(row);
setFormData(row)
}
const handleClose = () => {
emit('close')
emit('close')
}
defineExpose({
open,
setFormData,
getDetail
open,
setFormData,
getDetail
})
</script>
src/views/product/xiaoguotu/index.vue
<template>
<div>
<el-card class="!border-none" shadow="never">
<el-page-header :content="$route.meta.title" @back="goBack" />
</el-card>
<el-card class="!border-none mt-2" shadow="never" v-loading="pager.loading" v-if="activeTab=='xiaoguotu'">
<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>
</el-tabs>
<div class="mb-4 mt-2">
<el-button type="primary" @click="handleAdd()">
<template #icon>
<icon name="el-icon-Plus" />
</template>
新增效果图
</el-button>
</div>
<div class="mt-2">
<el-table ref="tableRef" size="large" v-loading="pager.loading" :data="pager.lists" row-key="id"
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
<el-table-column label="ID" prop="id" />
<el-table-column label="主图">
<template #default="{ row }">
<image-contain v-if="row.img_url" :src="getImageUrl(row.img_url, 200)" :width="80" :height="80"
:preview-src-list="[row.img_url]" preview-teleported fit="contain" />
</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">
<template #default="{ row }">
<div>{{ row.width }} X {{ row.height }} 像素</div>
</template>
</el-table-column>
<el-table-column label="颜色" min-width="120">
<template #default="{ row }">
<div v-if="row.db_diy_color" >
<div class="w-[20px] h-[20px]" :style="{background:row.db_diy_color.sezhi}"></div>
<div>{{ row.db_diy_color.title }}</div>
</div>
<span v-else>未绑定</span>
</template>
</el-table-column>
<el-table-column label="分辨率" min-width="120">
<template #default="{ row }">
<div>{{ row.dpi }} DPI</div>
</template>
</el-table-column>
<el-table-column 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>
<div>
<el-card class="!border-none" shadow="never">
<el-page-header :content="$route.meta.title" @back="goBack" />
</el-card>
<el-card
class="!border-none mt-2"
shadow="never"
v-loading="pager.loading"
v-if="activeTab == 'xiaoguotu'"
>
<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>
</el-tabs>
<div class="mb-4 mt-2">
<el-button type="primary" @click="handleAdd()">
<template #icon>
<icon name="el-icon-Plus" />
</template>
新增效果图
</el-button>
</div>
<div class="mt-2">
<el-table
ref="tableRef"
size="large"
v-loading="pager.loading"
:data="pager.lists"
row-key="id"
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
>
<el-table-column label="ID" prop="id" />
<el-table-column label="主图">
<template #default="{ row }">
<image-contain
v-if="row.img_url"
:src="getImageUrl(row.img_url, 200)"
:width="80"
:height="80"
:preview-src-list="[row.img_url]"
preview-teleported
fit="contain"
/>
</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">
<template #default="{ row }">
<div>{{ row.width }} X {{ row.height }} 像素</div>
</template>
</el-table-column>
<el-table-column label="颜色" min-width="120">
<template #default="{ row }">
<div v-if="row.db_diy_color">
<div
class="w-[20px] h-[20px]"
:style="{ background: row.db_diy_color.sezhi }"
></div>
<div>{{ row.db_diy_color.title }}</div>
</div>
<span v-else>未绑定</span>
</template>
</el-table-column>
<el-table-column label="分辨率" min-width="120">
<template #default="{ row }">
<div>{{ row.dpi }} DPI</div>
</template>
</el-table-column>
<el-table-column
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>
<script lang="ts" setup name="productFenlei">
import { apiDiyTemplateXiaoguotuList, apiDiyTemplateXiaoguotuDelete } from '@/api/product'
import {
apiDiyTemplateXiaoguotuList,
apiDiyTemplateXiaoguotuDelete
} from '@/api/product'
import { usePaging } from '@/hooks/usePaging'
import feedback from '@/utils/feedback'
import EditPopup from './edit.vue'
import type { ElTable } from 'element-plus'
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 route = useRoute();
const router = useRouter();
const route = useRoute()
const router = useRouter()
const goBack = () => {
removeTab();
router.go(-1);
removeTab()
router.go(-1)
}
const editRef = shallowRef<InstanceType<typeof EditPopup>>()
......@@ -109,40 +143,35 @@ const showEdit = ref(false)
const activeTab = ref('xiaoguotu')
const paramsData: any = reactive({
diy_id: route.query.did
diy_id: route.query.did
})
const { type } = defineProps(['type']);
type && (paramsData.type = type);
const { type } = defineProps(['type'])
type && (paramsData.type = type)
const { pager, getLists } = usePaging({
fetchFun: apiDiyTemplateXiaoguotuList,
params: paramsData
fetchFun: apiDiyTemplateXiaoguotuList,
params: paramsData
})
const handleAdd = async () => {
showEdit.value = true;
await nextTick();
editRef.value?.open('add', pager);
showEdit.value = true
await nextTick()
editRef.value?.open('add', pager)
}
const handleEdit = async (data: any) => {
showEdit.value = true;
await nextTick();
editRef.value?.open('edit', pager);
editRef.value?.getDetail(data)
showEdit.value = true
await nextTick()
editRef.value?.open('edit', pager)
editRef.value?.getDetail(data)
}
const handleDelete = async (id: number) => {
await feedback.confirm('确定要删除？')
await apiDiyTemplateXiaoguotuDelete({ id })
getLists()
await feedback.confirm('确定要删除？')
await apiDiyTemplateXiaoguotuDelete({ id })
getLists()
}
getLists()
</script>
src/views/user/setting.vue
<!-- 个人资料 -->
<template>
<div class="user-setting">
<el-card class="!border-none" shadow="never">
<el-form ref="formRef" class="ls-form" :model="formData" :rules="rules" label-width="100px">
<el-form-item label="当前密码：" prop="password_3">
<div class="w-80">
<el-input v-model.trim="formData.password_3" placeholder="修改密码时必填, 不修改密码时留空" type="password"
show-password />
</div>
</el-form-item>
<el-form-item label="新的密码：" prop="password_1">
<div class="w-80">
<el-input v-model.trim="formData.password_1" placeholder="修改密码时必填, 不修改密码时留空" type="password"
show-password />
</div>
</el-form-item>
<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>
<div class="user-setting">
<el-card class="!border-none" shadow="never">
<el-form
ref="formRef"
class="ls-form"
:model="formData"
:rules="rules"
label-width="100px"
>
<el-form-item label="当前密码：" prop="password_3">
<div class="w-80">
<el-input
v-model.trim="formData.password_3"
placeholder="修改密码时必填, 不修改密码时留空"
type="password"
show-password
/>
</div>
</el-form-item>
<el-form-item label="新的密码：" prop="password_1">
<div class="w-80">
<el-input
v-model.trim="formData.password_1"
placeholder="修改密码时必填, 不修改密码时留空"
type="password"
show-password
/>
</div>
</el-form-item>
<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>
<script setup lang="ts" name="userSetting">
......@@ -42,81 +58,78 @@ const formRef = ref<FormInstance>()
const userStore = useUserStore()
// 表单数据
const formData = reactive({
password_3: '', // 当前密码
password_1: '', // 新的密码
password_2: '' // 确定密码
password_3: '', // 当前密码
password_1: '', // 新的密码
password_2: '' // 确定密码
})
// 表单校验规则
const rules = reactive<object>({
password_1: [
{
required: true,
message: '请输入新的密码',
trigger: ['blur']
}
],
password_2: [
{
required: true,
message: '请输入确定密码',
trigger: ['blur']
}
],
password_3: [
{
required: true,
message: '请输入当前密码',
trigger: ['blur']
}
]
password_1: [
{
required: true,
message: '请输入新的密码',
trigger: ['blur']
}
],
password_2: [
{
required: true,
message: '请输入确定密码',
trigger: ['blur']
}
],
password_3: [
{
required: true,
message: '请输入当前密码',
trigger: ['blur']
}
]
})
// 设置个人设置
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_3) {
return feedback.msgError('请输入当前密码')
}
if (!formData.password_1) {
return feedback.msgError('请输入新的密码')
}
if (!formData.password_1) {
return feedback.msgError('请输入新的密码')
}
if (!formData.password_2) {
return feedback.msgError('请输入确定密码')
}
if (!formData.password_2) {
return feedback.msgError('请输入确定密码')
}
if (formData.password_1 != formData.password_2) {
return feedback.msgError('两次输入的密码不一样')
}
if (formData.password_1 != formData.password_2) {
return feedback.msgError('两次输入的密码不一样')
}
}
if (formData.password_3 && formData.password_1 && formData.password_2) {
if (formData.password_3.length < 6 || formData.password_3.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之间')
}
if (formData.password_3 && formData.password_1 && formData.password_2) {
if (formData.password_3.length < 6 || formData.password_3.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)
feedback.msgSuccess("操作成功");
userStore.getUserInfo();
await setUserInfo(formData)
feedback.msgSuccess('操作成功')
userStore.getUserInfo()
}
// 提交数据
const handleSubmit = async () => {
await formRef.value?.validate()
setUser()
await formRef.value?.validate()
setUser()
}
</script>
<style lang="scss" scoped></style>
src/views/userSave/item/index.vue
<template>
<div>
<el-card class="!border-none" shadow="never">
<el-page-header :content="$route.meta.title" @back="goBack" />
</el-card>
<template v-if="data">
<el-card class="!border-none mt-2" shadow="never">
<el-descriptions class="margin-top" :title="data.sku + ' ' + data.db_diy.title" :column="3" :border="true">
<template #extra>
<div class="flex">
<div>
<el-tag size="large" type="warning" v-if="data.xgt_status == 9">效果图待生成</el-tag>
<el-tag size="large" type="success" v-else-if="data.xgt_status == 1">效果图已生成</el-tag>
<el-tag size="large" type="danger" v-else>效果图失败</el-tag>
</div>
<div class="ml-3">
<el-tag size="large" type="warning" v-if="data.status == 9">总待生成</el-tag>
<el-tag size="large" type="success" v-else-if="data.status == 1">总已生成</el-tag>
<el-tag size="large" type="danger" v-else>总失败</el-tag>
</div>
</div>
</template>
<el-descriptions-item label="SKU">{{ data.sku }}</el-descriptions-item>
<el-descriptions-item label="自定义编码">{{ data.bianma }}</el-descriptions-item>
<el-descriptions-item label="模板SKU">{{ data.db_diy.sku }}</el-descriptions-item>
<el-descriptions-item label="用户昵称">{{ data.db_diy_user.name }}</el-descriptions-item>
<el-descriptions-item label="用户SKU">{{ data.db_diy_user.sku }}</el-descriptions-item>
<el-descriptions-item label="回调地址">{{ data.callback }}</el-descriptions-item>
<el-descriptions-item label="创建时间">{{ data.create_date }}</el-descriptions-item>
<el-descriptions-item label="效果图完成时间">{{ data.xgt_update_date }}</el-descriptions-item>
<el-descriptions-item label="总完成时间">{{ data.update_date }}</el-descriptions-item>
</el-descriptions>
</el-card>
<el-card class="!border-none mt-2" shadow="never">
<div class=" font-bold">用户设计图</div>
<div class="mt-2">
<image-contain v-for="item in data.face_list" :src="getImageUrl(item.img_url || morenImg, 100)"
:width="80" :height="80" :preview-src-list="[getImageUrl(item.img_url || morenImg)]"
preview-teleported fit="contain" />
</div>
</el-card>
<el-card class="!border-none mt-2" shadow="never">
<div class=" font-bold">效果图</div>
<div class="mt-4">
<image-contain v-for="item in data.xiaoguotu_list" :src="getImageUrl(item.img_url || morenImg, 100)"
:width="80" :height="80" :preview-src-list="[getImageUrl(item.img_url || morenImg)]"
preview-teleported fit="contain" />
</div>
</el-card>
<el-card class="!border-none mt-2" shadow="never">
<div class=" font-bold">尺码图</div>
<div class="flex mt-4">
<el-table class="mt-4" size="large" :data="data.chima_list">
<el-table-column label="标题" prop="title"></el-table-column>
<el-table-column label="编码" prop="title"></el-table-column>
<el-table-column label="文件路径">
<template #default="{ row }">
<el-button link type="primary" v-if="row.img_url">
<a :href="getImageUrl(row.img_url)" target="_blank">{{row.img_url}}</a>
</el-button>
<div v-else>未生成</div>
</template>
</el-table-column>
<el-table-column label="文件路径">
<template #default="{ row }">
<el-button link type="primary" v-if="row.img_url">
<a :href="getImageUrl(row.img_url)" target="_blank">下载</a>
</el-button>
</template>
</el-table-column>
</el-table>
</div>
</el-card>
</template>
</div>
<div>
<el-card class="!border-none" shadow="never">
<el-page-header :content="$route.meta.title" @back="goBack" />
</el-card>
<template v-if="data">
<el-card class="!border-none mt-2" shadow="never">
<el-descriptions
class="margin-top"
:title="data.sku + ' ' + data.db_diy.title"
:column="3"
:border="true"
>
<template #extra>
<div class="flex">
<div>
<el-tag size="large" type="warning" v-if="data.xgt_status == 9"
>效果图待生成</el-tag
>
<el-tag
size="large"
type="success"
v-else-if="data.xgt_status == 1"
>效果图已生成</el-tag
>
<el-tag size="large" type="danger" v-else>效果图失败</el-tag>
</div>
<div class="ml-3">
<el-tag size="large" type="warning" v-if="data.status == 9"
>总待生成</el-tag
>
<el-tag size="large" type="success" v-else-if="data.status == 1"
>总已生成</el-tag
>
<el-tag size="large" type="danger" v-else>总失败</el-tag>
</div>
</div>
</template>
<el-descriptions-item label="SKU">{{
data.sku
}}</el-descriptions-item>
<el-descriptions-item label="自定义编码">{{
data.bianma
}}</el-descriptions-item>
<el-descriptions-item label="模板SKU">{{
data.db_diy.sku
}}</el-descriptions-item>
<el-descriptions-item label="用户昵称">{{
data.db_diy_user.name
}}</el-descriptions-item>
<el-descriptions-item label="用户SKU">{{
data.db_diy_user.sku
}}</el-descriptions-item>
<el-descriptions-item label="回调地址">{{
data.callback
}}</el-descriptions-item>
<el-descriptions-item label="创建时间">{{
data.create_date
}}</el-descriptions-item>
<el-descriptions-item label="效果图完成时间">{{
data.xgt_update_date
}}</el-descriptions-item>
<el-descriptions-item label="总完成时间">{{
data.update_date
}}</el-descriptions-item>
</el-descriptions>
</el-card>
<el-card class="!border-none mt-2" shadow="never">
<div class="font-bold">用户设计图</div>
<div class="mt-2">
<image-contain
v-for="(item,index) in data.face_list"
:key="index"
:src="getImageUrl(item.img_url || morenImg, 100)"
:width="80"
:height="80"
:preview-src-list="[getImageUrl(item.img_url || morenImg)]"
preview-teleported
fit="contain"
/>
</div>
</el-card>
<el-card class="!border-none mt-2" shadow="never">
<div class="font-bold">效果图</div>
<div class="mt-4">
<image-contain
v-for="(item,i) in data.xiaoguotu_list"
:key="i"
:src="getImageUrl(item.img_url || morenImg, 100)"
:width="80"
:height="80"
:preview-src-list="[getImageUrl(item.img_url || morenImg)]"
preview-teleported
fit="contain"
/>
</div>
</el-card>
<el-card class="!border-none mt-2" shadow="never">
<div class="font-bold">尺码图</div>
<div class="flex mt-4">
<el-table class="mt-4" size="large" :data="data.chima_list">
<el-table-column label="标题" prop="title"></el-table-column>
<el-table-column label="编码" prop="title"></el-table-column>
<el-table-column label="文件路径">
<template #default="{ row }">
<el-button link type="primary" v-if="row.img_url">
<a :href="getImageUrl(row.img_url)" target="_blank">{{
row.img_url
}}</a>
</el-button>
<div v-else>未生成</div>
</template>
</el-table-column>
<el-table-column label="文件路径">
<template #default="{ row }">
<el-button link type="primary" v-if="row.img_url">
<a :href="getImageUrl(row.img_url)" target="_blank">下载</a>
</el-button>
</template>
</el-table-column>
</el-table>
</div>
</el-card>
</template>
</div>
</template>
<script lang="ts" setup name="productFenlei">
import type { ElTable } from 'element-plus'
import useMultipleTabs from '@/hooks/useMultipleTabs'
import { getImageUrl } from "@/utils/getImgUrl";
import { apiDiyUserSaveItem } from "@/api/member"
const morenImg = 'https://foxpsd.com/diy/shop/images/xiaoguotu.jpg';
import { getImageUrl } from '@/utils/getImgUrl'
import { apiDiyUserSaveItem } from '@/api/member'
const morenImg = 'https://foxpsd.com/diy/shop/images/xiaoguotu.jpg'
const { removeTab } = useMultipleTabs()
const router = useRouter();
const route = useRoute();
const router = useRouter()
const route = useRoute()
const goBack = () => {
removeTab();
router.go(-1);
removeTab()
router.go(-1)
}
const data = ref();
const data = ref()
const getData = async () => {
let res: any = await apiDiyUserSaveItem({ sku: route.query.sku })
data.value = res.data;
const res: any = await apiDiyUserSaveItem({ sku: route.query.sku })
data.value = res.data
}
const getHouzhui = (url: string): boolean => {
if (/\.(svg|tiff)$/.test(url)) {
return true
} else {
return false
}
if (/\.(svg|tiff)$/.test(url)) {
return true
} else {
return false
}
}
onActivated(() => {
getData();
getData()
})
onMounted(() => {
getData();
getData()
})
</script>
src/views/userSave/lists/index.vue
<template>
<div class="article-lists">
<el-card class="!border-none" shadow="never">
<el-form ref="formRef" class="mb-[-16px]" @submit.native.prevent :model="queryParams" :inline="true">
<el-form-item label="编号/标题">
<el-input class="w-[280px]" v-model="queryParams.content" clearable @keyup.enter="resetPage" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="resetPage">查询</el-button>
<el-button @click="resetParams">重置</el-button>
</el-form-item>
</el-form>
</el-card>
<el-card class="!border-none mt-4" shadow="never">
<div class="flex justify-between">
<div class="flex mb-4">
<el-button type="primary" @click="downUserSave(selectData.join(','))" :disabled="selectData.length>0?false:true">批量下载</el-button>
<el-button type="danger" @click="handleDelete(selectData.join(','))" :disabled="selectData.length>0?false:true">批量删除</el-button>
</div>
<pagination v-model="pager" @change="getLists" />
<div class="article-lists">
<el-card class="!border-none" shadow="never">
<el-form
ref="formRef"
class="mb-[-16px]"
@submit.native.prevent
:model="queryParams"
:inline="true"
>
<el-form-item label="编号/标题">
<el-input
class="w-[280px]"
v-model="queryParams.content"
clearable
@keyup.enter="resetPage"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="resetPage">查询</el-button>
<el-button @click="resetParams">重置</el-button>
</el-form-item>
</el-form>
</el-card>
<el-card class="!border-none mt-4" shadow="never">
<div class="flex justify-between">
<div class="flex mb-4">
<el-button
type="primary"
@click="downUserSave(selectData.join(','))"
:disabled="selectData.length > 0 ? false : true"
>批量下载</el-button
>
<el-button
type="danger"
@click="handleDelete(selectData.join(','))"
:disabled="selectData.length > 0 ? false : true"
>批量删除</el-button
>
</div>
<pagination v-model="pager" @change="getLists" />
</div>
<el-table
class="mt-4"
@selection-change="handleSelectionChange"
size="large"
v-loading="pager.loading"
:data="pager.lists"
>
<el-table-column type="selection" width="55" />
<el-table-column label="SKU" width="200">
<template #default="{ row }">
<div>
<div>
<router-link :to="`/userSave/lists/item?sku=${row.sku}`">
<el-button link type="primary">{{ row.sku }}</el-button>
</router-link>
</div>
<div v-copy="row.sku" class="flex items-center">
<el-button link type="primary">复制</el-button>
<icon
class="ml-2"
:size="14"
color="#38f"
name="el-icon-DocumentCopy"
/>
</div>
</div>
</template>
</el-table-column>
<el-table-column label="基础信息" width="150">
<template #default="{ row }">
<div v-if="row.db_diy">模板标题：{{ row.db_diy.title }}</div>
<div>自定义编码：{{ row.bianma }}</div>
</template>
</el-table-column>
<el-table-column label="用户设计图" min-width="150">
<template #default="{ row }">
<div
class="flex flex-wrap relative"
v-if="row.face_list.length > 0"
>
<image-contain
v-for="(item, index) in row.face_list"
:key="index"
:src="getImageUrl(item.img_url || morenImg, 100)"
:width="50"
:height="50"
:preview-src-list="[getImageUrl(item.img_url || morenImg)]"
preview-teleported
fit="contain"
class="mr-2 mb-2"
/>
</div>
<div v-else>-</div>
</template>
</el-table-column>
<el-table-column label="效果图" min-width="150">
<template #default="{ row }">
<div
class="flex flex-wrap relative"
v-if="row.xiaoguotu_list.length > 0"
>
<image-contain
v-for="(item, index) in row.xiaoguotu_list"
:key="index"
:src="getImageUrl(item.img_url || morenImg, 100)"
:width="50"
:height="50"
:preview-src-list="[getImageUrl(item.img_url || morenImg)]"
preview-teleported
fit="contain"
class="mr-2 mb-2"
/>
</div>
<div v-else>-</div>
</template>
</el-table-column>
<el-table-column label="尺码图" min-width="150">
<template #default="{ row }">
<div class="flex relative" v-if="row.chima_list.length > 0">
<router-link :to="`/userSave/lists/item?sku=${row.sku}`">
<el-button type="primary" link> 点击查看 </el-button>
</router-link>
</div>
<div v-else>-</div>
</template>
</el-table-column>
<el-table-column label="效果图状态">
<template #default="{ row }">
<el-tag type="success" v-if="row.xgt_status == 1">已生成</el-tag>
<el-tag type="warning" v-else-if="row.xgt_status == 9"
>待生成</el-tag
>
<el-tag type="danger" v-else>失败</el-tag>
</template>
</el-table-column>
<el-table-column label="总状态">
<template #default="{ row }">
<el-tag type="success" v-if="row.status == 1">已生成</el-tag>
<el-tag type="warning" v-else-if="row.status == 9">待生成</el-tag>
<el-tag type="danger" v-else>失败</el-tag>
</template>
</el-table-column>
<el-table-column label="时间" width="180">
<template #default="{ row }">
<div>
创建时间：
<div>{{ row.create_date }}</div>
</div>
<div>
效果图完成时间：
<div>{{ row.xgt_update_date }}</div>
</div>
<div>
总完成时间：
<div>{{ row.update_date }}</div>
</div>
</template>
</el-table-column>
<el-table-column label="操作" width="160" fixed="right">
<template #default="{ row }">
<div class="">
<router-link :to="`/userSave/lists/item?sku=${row.sku}`">
<el-button type="primary" link> 详情 </el-button>
</router-link>
</div>
<el-table class="mt-4" @selection-change="handleSelectionChange" size="large" v-loading="pager.loading"
:data="pager.lists">
<el-table-column type="selection" width="55" />
<el-table-column label="SKU" width="200">
<template #default="{ row }">
<div>
<div>
<router-link :to="`/userSave/lists/item?sku=${row.sku}`">
<el-button link type="primary">{{ row.sku }}</el-button>
</router-link>
</div>
<div v-copy="row.sku" class="flex items-center">
<el-button link type="primary">复制</el-button>
<icon class="ml-2" :size="14" color="#38f" name="el-icon-DocumentCopy" />
</div>
</div>
</template>
</el-table-column>
<el-table-column label="基础信息" width="150" >
<template #default="{ row }">
<div v-if="row.db_diy">模板标题：{{ row.db_diy.title }}</div>
<div>自定义编码：{{row.bianma}}</div>
</template>
</el-table-column>
<el-table-column label="用户设计图" min-width="150">
<template #default="{ row }">
<div class="flex flex-wrap relative" v-if="row.face_list.length > 0">
<image-contain v-for="item in row.face_list" :src="getImageUrl(item.img_url || morenImg, 100)"
:width="50" :height="50" :preview-src-list="[getImageUrl(item.img_url || morenImg)]"
preview-teleported fit="contain" class="mr-2 mb-2"/>
</div>
<div v-else>-</div>
</template>
</el-table-column>
<el-table-column label="效果图" min-width="150">
<template #default="{ row }">
<div class="flex flex-wrap relative" v-if="row.xiaoguotu_list.length > 0">
<image-contain v-for="item in row.xiaoguotu_list"
:src="getImageUrl(item.img_url || morenImg, 100)" :width="50" :height="50"
:preview-src-list="[getImageUrl(item.img_url || morenImg)]" preview-teleported
fit="contain" class="mr-2 mb-2"/>
</div>
<div v-else>-</div>
</template>
</el-table-column>
<el-table-column label="尺码图" min-width="150">
<template #default="{ row }">
<div class="flex relative" v-if="row.chima_list.length > 0">
<router-link :to="`/userSave/lists/item?sku=${row.sku}`">
<el-button type="primary" link>
点击查看
</el-button>
</router-link>
</div>
<div v-else>-</div>
</template>
</el-table-column>
<el-table-column label="效果图状态">
<template #default="{ row }">
<el-tag type="success" v-if="row.xgt_status == 1">已生成</el-tag>
<el-tag type="warning" v-else-if="row.xgt_status == 9">待生成</el-tag>
<el-tag type="danger" v-else>失败</el-tag>
</template>
</el-table-column>
<el-table-column label="总状态">
<template #default="{ row }">
<el-tag type="success" v-if="row.status == 1">已生成</el-tag>
<el-tag type="warning" v-else-if="row.status == 9">待生成</el-tag>
<el-tag type="danger" v-else>失败</el-tag>
</template>
</el-table-column>
<el-table-column label="时间" width="180">
<template #default="{ row }">
<div>创建时间：<div>{{ row.create_date }}</div></div>
<div>效果图完成时间：<div>{{ row.xgt_update_date }}</div></div>
<div>总完成时间：<div>{{ row.update_date }}</div></div>
</template>
</el-table-column>
<el-table-column label="操作" width="160" fixed="right">
<template #default="{ row }">
<div class="">
<router-link :to="`/userSave/lists/item?sku=${row.sku}`">
<el-button type="primary" link>
详情
</el-button>
</router-link>
</div>
<div class="">
<el-button type="primary" link @click="handleAdd(row)">
重新生成指定尺码
</el-button>
</div>
<div class="mt-1">
<el-button type="danger" link @click="handleDelete(row.sku)">
删除
</el-button>
</div>
</template>
</el-table-column>
</el-table>
<div class="flex justify-end mt-4">
<pagination v-model="pager" @change="getLists" />
<div class="">
<el-button type="primary" link @click="handleAdd(row)">
重新生成指定尺码
</el-button>
</div>
</el-card>
<RenderChima v-if="showEdit" ref="editRef" @success="getLists" @close="showEdit = false" />
</div>
<div class="mt-1">
<el-button type="danger" link @click="handleDelete(row.sku)">
删除
</el-button>
</div>
</template>
</el-table-column>
</el-table>
<div class="flex justify-end mt-4">
<pagination v-model="pager" @change="getLists" />
</div>
</el-card>
<RenderChima
v-if="showEdit"
ref="editRef"
@success="getLists"
@close="showEdit = false"
/>
</div>
</template>
<script lang="ts" setup name="productLists">
import { apiDiyUserSaveList, apiDiyUserSaveDelete,apiDiyUserDownCreate} from "@/api/member"
import {
apiDiyUserSaveList,
apiDiyUserSaveDelete,
apiDiyUserDownCreate
} from '@/api/member'
import { usePaging } from '@/hooks/usePaging'
import feedback from '@/utils/feedback'
import { getImageUrl } from "@/utils/getImgUrl";
import RenderChima from "./renderChima.vue"
import { getImageUrl } from '@/utils/getImgUrl'
import RenderChima from './renderChima.vue'
const showEdit = ref(false)
const editRef = shallowRef<InstanceType<typeof RenderChima>>()
const morenImg = 'https://foxpsd.com/diy/shop/images/xiaoguotu.jpg';
const morenImg = 'https://foxpsd.com/diy/shop/images/xiaoguotu.jpg'
const queryParams = reactive({
content: '',
content: ''
})
const { pager, getLists, resetPage, resetParams } = usePaging({
fetchFun: apiDiyUserSaveList,
params: queryParams
fetchFun: apiDiyUserSaveList,
params: queryParams
})
const selectData = ref<any[]>([])
const handleSelectionChange = (val: any[]) => {
selectData.value = val.map(({ sku }) => sku)
selectData.value = val.map(({ sku }) => sku)
}
const downUserSave =async (skus: string) => {
await feedback.confirm('确定要下载吗？')
await apiDiyUserDownCreate({ skus })
feedback.msgSuccess("操作成功")
getLists()
const downUserSave = async (skus: string) => {
await feedback.confirm('确定要下载吗？')
await apiDiyUserDownCreate({ skus })
feedback.msgSuccess('操作成功')
getLists()
}
const handleDelete = async (skus: string) => {
await feedback.confirm('确定要删除？')
await apiDiyUserSaveDelete({ skus })
getLists()
await feedback.confirm('确定要删除？')
await apiDiyUserSaveDelete({ skus })
getLists()
}
const handleAdd = async (row:any) => {
showEdit.value = true;
await nextTick();
editRef.value?.open('add',row);
const handleAdd = async (row: any) => {
showEdit.value = true
await nextTick()
editRef.value?.open('add', row)
}
onActivated(() => {
getLists()
getLists()
})
onMounted(() => {
getLists()
getLists()
})
</script>
<style lang="scss" scoped>
.goodsInfo {
.title {
font-weight: bold;
}
.title {
font-weight: bold;
}
}
.foxpsd_box {
.zhutu_data {
display: flex;
align-items: flex-start;
justify-content: space-between;
.right_txt {
font-size: 16px;
font-weight: bold;
color: #333;
.ts {
color: #666;
font-weight: 400;
}
}
.zhutu_data {
display: flex;
align-items: flex-start;
justify-content: space-between;
.right_txt {
font-size: 16px;
font-weight: bold;
color: #333;
.ts {
color: #666;
font-weight: 400;
}
}
}
.boy_detail {
margin-bottom: 20px;
.boy_biaoti {
font-size: 16px;
color: #38f;
}
.boy_detail {
margin-bottom: 20px;
.img_list {
display: flex;
flex-wrap: wrap;
.item_xiaoguo {
text-align: center;
font-size: 14px;
margin-bottom: 5px;
margin-right: 5px;
}
}
.boy_biaoti {
font-size: 16px;
color: #38f;
}
.img_list {
display: flex;
flex-wrap: wrap;
.item_xiaoguo {
text-align: center;
font-size: 14px;
margin-bottom: 5px;
margin-right: 5px;
}
}
}
}
.nav_her_btn {
display: flex;
align-items: center;
justify-content: flex-end;
font-size: 18px;
color: #38f;
cursor: pointer;
}</style>
\ No newline at end of file
display: flex;
align-items: center;
justify-content: flex-end;
font-size: 18px;
color: #38f;
cursor: pointer;
}
</style>
src/views/userSave/lists/renderChima.vue
<template>
<div class="edit-popup">
<popup ref="popupRef" title="重新生成指定尺码" :async="true" width="800px" @confirm="handleSubmit" @close="handleClose">
<el-form ref="formRef" :model="formData" label-width="160px" :rules="formRules" class="w-[90%]" v-if="diy">
<el-form-item label="选择尺码" prop="chima_id">
<el-select v-model="formData.chima_id" placeholder="请选择要生成的尺码">
<el-option :value="item.id" :label="'标题：'+item.title + ' 编码：' + item.bianma"
v-for="item in diy.chimaList"></el-option>
</el-select>
</el-form-item>
<el-form-item label="生成图片格式" prop="sc_img_type">
<el-radio-group v-model="formData.sc_img_type">
<el-radio :label="1">JPG</el-radio>
<el-radio :label="2">SVG</el-radio>
<el-radio :label="3">TIFF</el-radio>
</el-radio-group>
</el-form-item>
<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>
<div class="edit-popup">
<popup
ref="popupRef"
title="重新生成指定尺码"
:async="true"
width="800px"
@confirm="handleSubmit"
@close="handleClose"
>
<el-form
ref="formRef"
:model="formData"
label-width="160px"
:rules="formRules"
class="w-[90%]"
v-if="diy"
>
<el-form-item label="选择尺码" prop="chima_id">
<el-select
v-model="formData.chima_id"
placeholder="请选择要生成的尺码"
>
<el-option
v-for="(item, i) in diy.chimaList"
:value="item.id"
:label="'标题：' + item.title + ' 编码：' + item.bianma"
:key="i"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="生成图片格式" prop="sc_img_type">
<el-radio-group v-model="formData.sc_img_type">
<el-radio :label="1">JPG</el-radio>
<el-radio :label="2">SVG</el-radio>
<el-radio :label="3">TIFF</el-radio>
</el-radio-group>
</el-form-item>
<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>
<script lang="ts" setup>
import type { FormInstance } from 'element-plus'
import { apiDiyTemplateItem } from '@/api/product'
import { apiDiyUserSaveChimaRender } from "@/api/member";
import { apiDiyUserSaveChimaRender } from '@/api/member'
import Popup from '@/components/popup/index.vue'
const emit = defineEmits(['success', 'close'])
......@@ -53,81 +74,76 @@ const popupRef = shallowRef<InstanceType<typeof Popup>>()
const mode = ref('add')
const formData = reactive({
chima_id: '',
sku:'',
posts_content: '',
sc_img_type:1
chima_id: '',
sku: '',
posts_content: '',
sc_img_type: 1
})
const formRules: any = reactive({
chima_id: [
{
required: true,
message: '请选择尺码',
trigger: 'blur'
}
]
chima_id: [
{
required: true,
message: '请选择尺码',
trigger: 'blur'
}
]
})
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){
obj.posts = JSON.parse(obj.posts_content);
delete obj.posts_content;
}
await apiDiyUserSaveChimaRender(obj)
popupRef.value?.close()
emit('success')
if (obj.posts_content) {
obj.posts = JSON.parse(obj.posts_content)
delete obj.posts_content
}
await apiDiyUserSaveChimaRender(obj)
popupRef.value?.close()
emit('success')
}
const userSaveItem = ref();
const diy = ref();
const userSaveItem = ref()
const diy = ref()
const getData = async (sku: string) => {
let res = await apiDiyTemplateItem({
sku
})
diy.value = res.data
formData.sc_img_type = diy.value.sc_img_type
const res = await apiDiyTemplateItem({
sku
})
diy.value = res.data
formData.sc_img_type = diy.value.sc_img_type
}
const open = (key = 'add', row: any) => {
userSaveItem.value = row;
formData.sku = row.sku;
getData(row.db_diy.sku)
mode.value = key
popupRef.value?.open();
userSaveItem.value = row
formData.sku = row.sku
getData(row.db_diy.sku)
mode.value = key
popupRef.value?.open()
}
const setFormData = (data: Record<any, any>) => {
for (const key in formData) {
if (data[key] != null && data[key] != undefined) {
//@ts-ignore
formData[key] = data[key]
}
for (const key in formData) {
if (data[key] != null && data[key] != undefined) {
//@ts-ignore
formData[key] = data[key]
}
}
}
const getDetail = async (row: Record<string, any>) => {
setFormData(row);
setFormData(row)
}
const handleClose = () => {
emit('close')
emit('close')
}
defineExpose({
open,
setFormData,
getDetail
open,
setFormData,
getDetail
})
</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