admin/SEONexusAdmin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first

Browse Source
This commit is contained in:
make
2025-04-06 21:51:01 +08:00
commit 3792acd4c7
408 changed files with 42349 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

363
src/views/novel/setDrawer.vue Normal file
View File

@@ -0,0 +1,363 @@
<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"
v-model="e.value"
maxlength="36500"
: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: "keywords",
type: "textarea",
get value() {
return drawerProps.value.row!.keywords;
},
set value(val) {
drawerProps.value.row!.keywords = val;
},
required: true
},
{
label: "推荐等级",
prop: "n_level",
type: "text-num",
get value() {
return drawerProps.value.row!.n_level;
},
set value(val) {
drawerProps.value.row!.n_level = 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>