367 lines
14 KiB
Vue
367 lines
14 KiB
Vue
<template>
|
||
<el-drawer v-model="drawerVisible" :destroy-on-close="true" size="720" :title="`${drawerProps.title}`">
|
||
<el-form
|
||
ref="ruleFormRef"
|
||
label-width="150px"
|
||
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 === 'switch-index'">
|
||
<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>
|
||
</template> -->
|
||
<template v-if="e.type === 'text'">
|
||
<el-input v-model="e.value" :placeholder="`请输入${e.label},多个使用, 分割`" clearable></el-input>
|
||
</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"
|
||
:rows="20"
|
||
v-model="e.value"
|
||
maxlength="365000"
|
||
:placeholder="`请输入${e.label},多个使用, 分割`"
|
||
show-word-limit
|
||
/>
|
||
</template>
|
||
<!-- <template v-if="e.type === 'tag'">
|
||
<div class="tag-more-s">
|
||
<el-input
|
||
v-model="drawerProps.row.searchText"
|
||
placeholder="请输入搜索内容"
|
||
clearable
|
||
@input="handleSearch"
|
||
/>
|
||
<div>
|
||
<span>选中标签:</span>
|
||
<div class="tag-more-h">
|
||
<el-checkbox-group v-model="TagList" @change="placeableCheckedCitiesChange">
|
||
<el-checkbox-button
|
||
class="vip-power"
|
||
v-for="item in matchingObjects"
|
||
:value="item.t_id"
|
||
:key="item.t_id"
|
||
>
|
||
{{ item.t_name }}
|
||
</el-checkbox-button>
|
||
</el-checkbox-group>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<span>未选中标签:</span>
|
||
<div class="tag-more-h">
|
||
<el-checkbox-group v-model="TagList" @change="placeableCheckedCitiesChange">
|
||
<el-checkbox-button
|
||
class="vip-power"
|
||
v-for="item in nonMatchingObjects"
|
||
:value="item.t_id"
|
||
:key="item.t_id"
|
||
>
|
||
{{ item.t_name }}
|
||
</el-checkbox-button>
|
||
</el-checkbox-group>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template> -->
|
||
<!-- <template v-if="e.type === 'text-i'">
|
||
<UploadImg disabled v-model:image-url="drawerProps.row!.n_cover" width="135px" height="135px" :file-size="3">
|
||
<template #empty>
|
||
<el-icon><Avatar /></el-icon>
|
||
<span>请上传封面</span>
|
||
</template>
|
||
</UploadImg>
|
||
</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, reactive } from "vue";
|
||
import { ElMessage, FormInstance } from "element-plus";
|
||
// import { NovelList } from "@/api/interface/novel/list";
|
||
import { arrNovelType } from "@/utils/serviceDict";
|
||
// import { getTypeList } from "@/api/modules/tag/list";
|
||
// import UploadImg from "@/components/Upload/Img.vue";
|
||
import { extractURI } from "@/utils/eleValidate";
|
||
type Options = {
|
||
label: string;
|
||
value: string | number;
|
||
};
|
||
|
||
interface Item {
|
||
t_id: any;
|
||
uri: any;
|
||
}
|
||
// 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 };
|
||
};
|
||
const generateRules = (fields: Fields[]) => {
|
||
return fields.reduce(
|
||
(acc, field) => {
|
||
const { type, required, label, prop } = field;
|
||
let message = "";
|
||
|
||
if (type === "text") {
|
||
message = `请输入${label}`;
|
||
}
|
||
|
||
if (type === "text-num") {
|
||
message = `请输入${label}`;
|
||
}
|
||
|
||
acc[prop] = [{ required, message }];
|
||
return acc;
|
||
},
|
||
{} as Record<string, any>
|
||
);
|
||
};
|
||
|
||
const TagList = ref([] as any);
|
||
const arrTagList = ref([] as any);
|
||
const arrNewTagList = ref([] as any);
|
||
const matchingObjects = ref([] as any); //选中相同
|
||
const nonMatchingObjects = ref([] as any); //没有选中的
|
||
const matchingObjectsA = ref([] as any); //选中相同
|
||
const nonMatchingObjectsB = ref([] as any); //没有选中的
|
||
// const getTagList = async () => {
|
||
// try {
|
||
// const initParam = reactive({
|
||
// t_type: 3,
|
||
// limit: 3650,
|
||
// page: 1,
|
||
// t_hidden: 1
|
||
// });
|
||
// const siteRes = await getTypeList(initParam);
|
||
// arrTagList.value = siteRes.data.item;
|
||
// arrNewTagList.value = siteRes.data.item;
|
||
// matchingObjects.value = [];
|
||
// matchingObjectsA.value = [];
|
||
// // 遍历第一个数组的每个元素
|
||
// TagList.value.forEach(index => {
|
||
// // 遍历第二个数组的每个元素
|
||
// arrNewTagList.value.forEach(obj => {
|
||
// // 如果第二个数组中的元素的t_id与第一个数组中的元素相同，则将其添加到新数组中
|
||
// if (obj.t_id === index) {
|
||
// matchingObjects.value = [...matchingObjects.value, obj];
|
||
// matchingObjectsA.value = [...matchingObjectsA.value, obj];
|
||
// const matchingIds = matchingObjectsA.value.map(obj => obj.t_id);
|
||
// TagList.value = matchingIds;
|
||
// }
|
||
// });
|
||
// });
|
||
// // 创建一个新数组，包含objectArray中id不存在于arrayA的元素
|
||
// nonMatchingObjects.value = arrNewTagList.value.filter(obj => !TagList.value.includes(obj.t_id));
|
||
// nonMatchingObjectsB.value = arrNewTagList.value.filter(obj => !TagList.value.includes(obj.t_id));
|
||
// } catch (error) {
|
||
// console.log(error);
|
||
// }
|
||
// };
|
||
|
||
// 处理搜索事件
|
||
function handleSearch() {
|
||
// 在输入事件中实时更新过滤后的标签列表
|
||
filteredTagList();
|
||
}
|
||
function filteredTagList() {
|
||
if (drawerProps.value.row!.searchText.length > 0) {
|
||
let arrData = arrTagList.value.filter(tag =>
|
||
tag.t_name.toLowerCase().includes(drawerProps.value.row!.searchText.toLowerCase())
|
||
);
|
||
if (arrData.length > 0) {
|
||
matchingObjects.value = matchingObjects.value.filter(objA => arrData.some(objB => objB.t_id === objA.t_id));
|
||
nonMatchingObjects.value = nonMatchingObjects.value.filter(objA => arrData.some(objB => objB.t_id === objA.t_id));
|
||
} else {
|
||
matchingObjects.value = [];
|
||
nonMatchingObjects.value = [];
|
||
}
|
||
} else {
|
||
matchingObjects.value = matchingObjectsA.value;
|
||
nonMatchingObjects.value = nonMatchingObjectsB.value;
|
||
}
|
||
}
|
||
|
||
//标签数组
|
||
async function placeableCheckedCitiesChange(value) {
|
||
matchingObjects.value = [];
|
||
matchingObjectsA.value = [];
|
||
drawerProps.value.row.n_tags = value;
|
||
// 遍历第一个数组的每个元素
|
||
TagList.value.forEach(index => {
|
||
// 遍历第二个数组的每个元素
|
||
arrNewTagList.value.forEach(obj => {
|
||
// 如果第二个数组中的元素的t_id与第一个数组中的元素相同，则将其添加到新数组中
|
||
if (obj.t_id === index) {
|
||
matchingObjects.value = [...matchingObjects.value, obj];
|
||
matchingObjectsA.value = [...matchingObjectsA.value, obj];
|
||
const matchingIds = matchingObjectsA.value.map(obj => obj.t_id);
|
||
TagList.value = matchingIds;
|
||
}
|
||
});
|
||
});
|
||
nonMatchingObjects.value = arrNewTagList.value.filter(obj => !TagList.value.includes(obj.t_id));
|
||
nonMatchingObjectsB.value = arrNewTagList.value.filter(obj => !TagList.value.includes(obj.t_id));
|
||
}
|
||
const formColumns = computed((): Fields[] => {
|
||
return [
|
||
{
|
||
label: "票房",
|
||
prop: "v_box_office",
|
||
type: "text-num",
|
||
get value() {
|
||
return drawerProps.value.row!.v_box_office;
|
||
},
|
||
set value(val) {
|
||
drawerProps.value.row!.v_box_office = val;
|
||
},
|
||
required: true
|
||
},
|
||
{
|
||
label: "视频名字",
|
||
prop: "keywords",
|
||
type: "textarea",
|
||
get value() {
|
||
return drawerProps.value.row!.keywords;
|
||
},
|
||
set value(val) {
|
||
drawerProps.value.row!.keywords = val;
|
||
},
|
||
required: true
|
||
}
|
||
];
|
||
});
|
||
const rules = ref();
|
||
|
||
interface DrawerProps {
|
||
title: string;
|
||
isView: boolean;
|
||
row: Partial<NovelList.ResList>;
|
||
api?: (params: any) => Promise<any>;
|
||
getTableList?: () => 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;
|
||
TagList.value = [];
|
||
if (drawerProps.value.title === "新增") {
|
||
drawerProps.value.row!.n_type = 0;
|
||
}
|
||
if (drawerProps.value.row.n_cover) {
|
||
drawerProps.value.row.n_cover_code = drawerProps.value.row.n_cover.code;
|
||
drawerProps.value.row.n_cover = drawerProps.value.row.n_cover_detail;
|
||
}
|
||
if (drawerProps.value.row.n_tags) {
|
||
TagList.value = drawerProps.value.row.n_tags.map((obj: Item) => obj.t_id).map(Number);
|
||
}
|
||
// getTagList();
|
||
};
|
||
|
||
// 提交数据（新增/编辑）
|
||
const ruleFormRef = ref<FormInstance>();
|
||
const handleSubmit = () => {
|
||
ruleFormRef.value!.validate(async valid => {
|
||
if (!valid) return;
|
||
try {
|
||
const params = { ...drawerProps.value.row };
|
||
// let arrData = {
|
||
// uri: extractURI(params.n_cover),
|
||
// code: params.n_cover_code
|
||
// };
|
||
|
||
// params.n_cover = arrData;
|
||
// params.n_tags = TagList.value;
|
||
await drawerProps.value.api!(params);
|
||
ElMessage.success({ message: `${drawerProps.value.title}成功！` });
|
||
drawerProps.value.getTableList!();
|
||
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;
|
||
}
|
||
.tag-more-h {
|
||
margin-bottom: 10px;
|
||
}
|
||
.tag-more-s {
|
||
width: 100%;
|
||
padding: 10px;
|
||
border: 1px solid black;
|
||
box-shadow: 0 0 4px 2px rgb(0 0 0 / 90%);
|
||
}
|
||
</style>
|