first
This commit is contained in:
make
227
src/views/ad/list/cloneDrawer.vue
Normal file
227
src/views/ad/list/cloneDrawer.vue
Normal file
@@ -0,0 +1,227 @@
|
||||
<template>
|
||||
<el-drawer v-model="drawerVisible" :destroy-on-close="true" size="720" :title="`${drawerProps.title}`">
|
||||
<el-form
|
||||
ref="ruleFormRef"
|
||||
label-width="90px"
|
||||
label-position="top"
|
||||
label-suffix=" :"
|
||||
:rules="rules"
|
||||
:disabled="drawerProps.isView"
|
||||
:model="drawerProps.row"
|
||||
:hide-required-asterisk="drawerProps.isView"
|
||||
>
|
||||
<el-form-item v-for="e in formColumns" :key="e.label" :label="e.label" :prop="e.prop" :required="e.required">
|
||||
<template v-if="e.type === 'switch'">
|
||||
<el-switch
|
||||
v-model="e.value"
|
||||
:active-value="`${1}`"
|
||||
:inactive-value="`${0}`"
|
||||
active-text="上架"
|
||||
inactive-text="下架"
|
||||
/>
|
||||
</template>
|
||||
<template v-if="e.type === 'radio'">
|
||||
<el-radio-group v-model="e.value" class="ml-4">
|
||||
<el-radio v-for="item in e.options" :key="item.value" :value="item.value" size="large">{{
|
||||
item.label
|
||||
}}</el-radio>
|
||||
</el-radio-group>
|
||||
</template>
|
||||
<template v-if="e.type === 'select'">
|
||||
<el-select filterable v-model="e.value" :placeholder="`请选择${e.label}`" clearable>
|
||||
<el-option
|
||||
v-for="(item, index) in e.options"
|
||||
:key="index"
|
||||
:label="getField(item, e.fieldNames?.label)"
|
||||
:value="getField(item, e.fieldNames?.value)"
|
||||
/>
|
||||
</el-select>
|
||||
<div>{{ e.describe }}</div>
|
||||
</template>
|
||||
<template v-if="e.type === 'text'">
|
||||
<el-input v-model="e.value" :placeholder="`请输入${e.label}`" clearable></el-input>
|
||||
<div>{{ e.describe }}</div>
|
||||
</template>
|
||||
<template v-if="e.type === 'text-i'">
|
||||
<el-input v-model="e.value" :placeholder="`请输入${e.label}`" clearable></el-input>
|
||||
</template>
|
||||
<template v-if="e.type === 'text-num'">
|
||||
<el-input v-model="e.value" type="number" :placeholder="`请输入${e.label}`" clearable></el-input>
|
||||
</template>
|
||||
<template v-if="e.type === 'textarea'">
|
||||
<el-input
|
||||
type="textarea"
|
||||
v-model="e.value"
|
||||
maxlength="3650"
|
||||
:placeholder="`请输入${e.label}`"
|
||||
show-word-limit
|
||||
/>
|
||||
</template>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="drawerVisible = false">取消</el-button>
|
||||
<el-button v-show="!drawerProps.isView" type="primary" @click="handleSubmit">确定</el-button>
|
||||
</template>
|
||||
</el-drawer>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="UserDrawer">
|
||||
import { ref, computed } from "vue";
|
||||
import { ElMessage, FormInstance } from "element-plus";
|
||||
import { adList } from "@/api/interface/ad/list";
|
||||
import { getAllList } from "@/api/modules/site/list";
|
||||
type Options = {
|
||||
label: string;
|
||||
value: string | number;
|
||||
};
|
||||
|
||||
const getField = (item: any, fieldName: string | undefined) => {
|
||||
return fieldName ? item[fieldName] : "";
|
||||
};
|
||||
type Fields = {
|
||||
label: string;
|
||||
prop: string;
|
||||
type: string;
|
||||
value: any;
|
||||
required: boolean;
|
||||
options?: Options[];
|
||||
fieldNames?: { label: string; value: string };
|
||||
describe?: string;
|
||||
};
|
||||
const generateRules = (fields: Fields[]) => {
|
||||
return fields.reduce(
|
||||
(acc, field) => {
|
||||
const { type, required, label, prop } = field;
|
||||
let message = "";
|
||||
if (type === "select") {
|
||||
message = `请选择${label}`;
|
||||
}
|
||||
if (type === "tag") {
|
||||
message = `请选择${label}`;
|
||||
}
|
||||
if (type === "radio") {
|
||||
message = `请选择${label}`;
|
||||
}
|
||||
if (type === "text") {
|
||||
message = `请输入${label}`;
|
||||
}
|
||||
if (type === "text-i") {
|
||||
message = `请输入${label}`;
|
||||
}
|
||||
if (type === "text-num") {
|
||||
message = `请输入${label}`;
|
||||
}
|
||||
if (type === "textarea") {
|
||||
message = `请输入${label}`;
|
||||
}
|
||||
if (type === "image") {
|
||||
message = `请上传${label}`;
|
||||
}
|
||||
if (type === "image-more") {
|
||||
message = `请上传${label}`;
|
||||
}
|
||||
acc[prop] = [{ required, message }];
|
||||
return acc;
|
||||
},
|
||||
{} as Record<string, any>
|
||||
);
|
||||
};
|
||||
|
||||
const getSiteList = ref([] as any);
|
||||
getAllList().then(res => {
|
||||
getSiteList.value = res.data.item;
|
||||
});
|
||||
|
||||
const formColumns = computed((): Fields[] => {
|
||||
return [
|
||||
{
|
||||
label: "源站点",
|
||||
prop: "source_si_id",
|
||||
type: "select",
|
||||
get value() {
|
||||
return drawerProps.value.row!.source_si_id;
|
||||
},
|
||||
set value(val) {
|
||||
drawerProps.value.row!.source_si_id = val;
|
||||
},
|
||||
options: getSiteList.value,
|
||||
fieldNames: { label: "si_name", value: "si_id" },
|
||||
required: true
|
||||
},
|
||||
{
|
||||
label: "目标站点 ",
|
||||
prop: "target_si_id",
|
||||
type: "select",
|
||||
describe: "注意：目标站点不能跟源站点一样",
|
||||
get value() {
|
||||
return drawerProps.value.row!.target_si_id;
|
||||
},
|
||||
set value(val) {
|
||||
drawerProps.value.row!.target_si_id = val;
|
||||
},
|
||||
options: getSiteList.value,
|
||||
fieldNames: { label: "si_name", value: "si_id" },
|
||||
required: true
|
||||
}
|
||||
];
|
||||
});
|
||||
const rules = ref();
|
||||
|
||||
interface DrawerProps {
|
||||
title: string;
|
||||
isView: boolean;
|
||||
row: Partial<adList.List>;
|
||||
api?: (params: any) => Promise<any>;
|
||||
getTableList?: () => void;
|
||||
clearSelection?: () => void;
|
||||
}
|
||||
|
||||
const drawerVisible = ref(false);
|
||||
const drawerProps = ref<DrawerProps>({
|
||||
isView: false,
|
||||
title: "",
|
||||
row: {}
|
||||
});
|
||||
|
||||
// 接收父组件传过来的参数
|
||||
const acceptParams = (params: DrawerProps) => {
|
||||
drawerProps.value = params;
|
||||
rules.value = generateRules(formColumns.value);
|
||||
drawerVisible.value = true;
|
||||
};
|
||||
|
||||
// 提交数据（新增/编辑）
|
||||
const ruleFormRef = ref<FormInstance>();
|
||||
const handleSubmit = () => {
|
||||
ruleFormRef.value!.validate(async valid => {
|
||||
if (!valid) return;
|
||||
try {
|
||||
const params = { ...drawerProps.value.row };
|
||||
if (params.target_si_id == params.source_si_id) {
|
||||
ElMessage.warning({ message: `目标站点不能跟源站点一样！` });
|
||||
return;
|
||||
}
|
||||
|
||||
await drawerProps.value.api!(params);
|
||||
ElMessage.success({ message: `${drawerProps.value.title}成功！` });
|
||||
drawerProps.value.getTableList!();
|
||||
drawerProps.value.clearSelection!();
|
||||
drawerVisible.value = false;
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
defineExpose({
|
||||
acceptParams
|
||||
});
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.el-checkbox-button__inner {
|
||||
margin-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
border-left-color: #dcdfe6 !important;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user