更新
This commit is contained in:
yziiy
61
src/api/modules/expression.ts
Normal file
61
src/api/modules/expression.ts
Normal file
@@ -0,0 +1,61 @@
|
|||||||
|
import { http } from "@/utils/http";
|
||||||
|
|
||||||
|
type Result = {
|
||||||
|
code: string;
|
||||||
|
data: any;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const queryClassifyList = params => {
|
||||||
|
return http.request<Result>(
|
||||||
|
"get",
|
||||||
|
"/adminapi/RoomEmoji/emoji_type_list",
|
||||||
|
{ params }
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 分类新增
|
||||||
|
// export const addClassifyData = data => {
|
||||||
|
// return http.request<Result>("post", "/adminapi/GiftLabel/add_label", {
|
||||||
|
// data
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
// // 修改分类
|
||||||
|
// export const editClassifyData = data => {
|
||||||
|
// return http.request<Result>("post", "/adminapi/GiftLabel/edit_label", {
|
||||||
|
// data
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
// // 删除分类
|
||||||
|
// export const removeClassifyData = data => {
|
||||||
|
// return http.request<Result>("post", "/adminapi/GiftLabel/del_label", {
|
||||||
|
// data
|
||||||
|
// });
|
||||||
|
// };
|
||||||
|
// 列表
|
||||||
|
export const queryList = params => {
|
||||||
|
return http.request<Result>(
|
||||||
|
"get",
|
||||||
|
"/adminapi/RoomEmoji/emoji_list",
|
||||||
|
{ params }
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 新增
|
||||||
|
export const addData = data => {
|
||||||
|
return http.request<Result>("post", "/adminapi/RoomEmoji/add_emoji", {
|
||||||
|
data
|
||||||
|
});
|
||||||
|
}
|
||||||
|
// 编辑
|
||||||
|
export const editData = data => {
|
||||||
|
return http.request<Result>("post", "/adminapi/RoomEmoji/edit_emoji", {
|
||||||
|
data
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 删除
|
||||||
|
export const removeData = data => {
|
||||||
|
return http.request<Result>("post", "/adminapi/RoomEmoji/del_emoji", {
|
||||||
|
data
|
||||||
|
});
|
||||||
|
};
|
||||||
135
src/views/expression/form.vue
Normal file
135
src/views/expression/form.vue
Normal file
@@ -0,0 +1,135 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, onMounted } from "vue";
|
||||||
|
import uploadImage from '@/components/UploadImage/index.vue';
|
||||||
|
import { getGiftTypeOrLabel } from '@/api/modules/gift'
|
||||||
|
const ruleFormRef = ref();
|
||||||
|
const typeList = ref([])
|
||||||
|
const labelList = ref([])
|
||||||
|
const formRules = ref({
|
||||||
|
type: [{ required: true, message: "请选择分类", trigger: "change" }],
|
||||||
|
label: [{ required: true, message: "请输入礼物标签", trigger: "blur" }],
|
||||||
|
base_image: [{ required: true, message: "请上传礼物展示图片", trigger: "change" }],
|
||||||
|
play_image: [],
|
||||||
|
gift_type: [{ required: true, message: "请选择", trigger: "change" }],
|
||||||
|
is_public_screen: [{ required: true, message: "请选择", trigger: "change" }],
|
||||||
|
is_public_server: [{ required: true, message: "请选择", trigger: "change" }],
|
||||||
|
is_show: [{ required: true, message: "请选择", trigger: "change" }],
|
||||||
|
is_can_buy: [{ required: true, message: "请选择", trigger: "change" }],
|
||||||
|
sort: [],
|
||||||
|
file_type: [{ required: true, message: "请选择文件类型", trigger: "change" }],
|
||||||
|
gift_price: [{ required: true, message: "请输入礼物价格", trigger: "blur" }],
|
||||||
|
gift_name: [{ required: true, message: "请输入礼物名称", trigger: "blur" }, { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }]
|
||||||
|
});
|
||||||
|
const props = defineProps(["formInline"]);
|
||||||
|
const newFormInline = ref(
|
||||||
|
props.formInline
|
||||||
|
? props.formInline
|
||||||
|
: {
|
||||||
|
gift_name: "",
|
||||||
|
type: "",
|
||||||
|
label: "",
|
||||||
|
gift_price: "",
|
||||||
|
base_image: "",
|
||||||
|
file_type: "",
|
||||||
|
play_image: "",
|
||||||
|
gift_type: "",
|
||||||
|
is_public_screen: "",
|
||||||
|
is_public_server: "",
|
||||||
|
is_show: "",
|
||||||
|
is_can_buy: "",
|
||||||
|
sort: ""
|
||||||
|
}
|
||||||
|
);
|
||||||
|
function getRef() {
|
||||||
|
return ruleFormRef.value;
|
||||||
|
}
|
||||||
|
function handleFileSuccess(list) {
|
||||||
|
newFormInline.value.base_image = list.join(',')
|
||||||
|
}
|
||||||
|
function handlePlayFileSuccess(list) {
|
||||||
|
newFormInline.value.play_image = list.join(',')
|
||||||
|
}
|
||||||
|
const getTypeList = async () => {
|
||||||
|
const { data, code } = await getGiftTypeOrLabel({ type: 1 })
|
||||||
|
typeList.value = code ? data : []
|
||||||
|
}
|
||||||
|
const getLableList = async () => {
|
||||||
|
const { data, code } = await getGiftTypeOrLabel({ type: 2, type_id: newFormInline.value.type || '' })
|
||||||
|
labelList.value = code ? data : []
|
||||||
|
}
|
||||||
|
const changeType = () => {
|
||||||
|
getLableList()
|
||||||
|
}
|
||||||
|
onMounted(() => {
|
||||||
|
getTypeList()
|
||||||
|
getLableList()
|
||||||
|
})
|
||||||
|
defineExpose({ getRef });
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<el-form ref="ruleFormRef" :model="newFormInline" :rules="formRules" label-width="120px">
|
||||||
|
<el-form-item label="礼物名称" prop="gift_name">
|
||||||
|
<el-input v-model="newFormInline.gift_name" clearable placeholder="请输入礼物名称" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="礼物类型" prop="type">
|
||||||
|
<el-select v-model="newFormInline.type" placeholder="请选择礼物类型" @change="changeType">
|
||||||
|
<el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id">
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="礼物标签" prop="label">
|
||||||
|
<el-select v-model="newFormInline.label" placeholder="请选择礼物标签">
|
||||||
|
<el-option v-for="item in labelList" :key="item.id" :label="item.name" :value="item.id">
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="礼物价格" prop="gift_price">
|
||||||
|
<el-input-number v-model="newFormInline.gift_price" :precision="2" :step="0.01"></el-input-number>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="展示图片" prop="base_image">
|
||||||
|
<uploadImage @handleSuccess="handleFileSuccess" :limit="1" :echoUrl="newFormInline.base_image" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="文件类型" prop="file_type">
|
||||||
|
<el-radio-group v-model="newFormInline.file_type">
|
||||||
|
<el-radio :label="1">SVGA</el-radio>
|
||||||
|
<el-radio :label="2">MP4</el-radio>
|
||||||
|
</el-radio-group>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="礼物特效图" prop="play_image">
|
||||||
|
<uploadImage @handleSuccess="handlePlayFileSuccess"
|
||||||
|
:acceptType="newFormInline.file_type === 1 ? '.svg,.svga' : '.mp4'" :limit="1"
|
||||||
|
:echoUrl="newFormInline.play_image" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="是否有特效" prop="gift_type">
|
||||||
|
<el-radio-group v-model="newFormInline.gift_type">
|
||||||
|
<el-radio :label="2">是</el-radio>
|
||||||
|
<el-radio :label="1">否</el-radio>
|
||||||
|
</el-radio-group>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="是否公屏" prop="is_public_screen">
|
||||||
|
<el-radio-group v-model="newFormInline.is_public_screen">
|
||||||
|
<el-radio :label="1">是</el-radio>
|
||||||
|
<el-radio :label="2">否</el-radio>
|
||||||
|
</el-radio-group>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="是否全服播报" prop="is_public_server">
|
||||||
|
<el-radio-group v-model="newFormInline.is_public_server">
|
||||||
|
<el-radio :label="1">是</el-radio>
|
||||||
|
<el-radio :label="2">否</el-radio>
|
||||||
|
</el-radio-group>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="是否显示" prop="is_show">
|
||||||
|
<el-radio-group v-model="newFormInline.is_show">
|
||||||
|
<el-radio :label="1">显示</el-radio>
|
||||||
|
<el-radio :label="2">隐藏</el-radio>
|
||||||
|
</el-radio-group>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="是否可购买" prop="is_can_buy">
|
||||||
|
<el-radio-group v-model="newFormInline.is_can_buy">
|
||||||
|
<el-radio :label="1">可购买</el-radio>
|
||||||
|
<el-radio :label="2">禁止购买</el-radio>
|
||||||
|
</el-radio-group>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</template>
|
||||||
189
src/views/expression/hook.tsx
Normal file
189
src/views/expression/hook.tsx
Normal file
@@ -0,0 +1,189 @@
|
|||||||
|
import { ref, h } from "vue";
|
||||||
|
import editForm from "./form.vue";
|
||||||
|
import { message } from "@/utils/message";
|
||||||
|
import {
|
||||||
|
queryList,
|
||||||
|
addData,
|
||||||
|
editData,
|
||||||
|
removeData
|
||||||
|
} from "@/api/modules/expression";
|
||||||
|
import { addDialog } from "@/components/ReDialog";
|
||||||
|
|
||||||
|
export function useData() {
|
||||||
|
const formRef = ref();
|
||||||
|
const loading = ref(true);
|
||||||
|
const tableList = ref([]);
|
||||||
|
const isShow = ref(false);
|
||||||
|
const searchForm = ref({
|
||||||
|
id: "",
|
||||||
|
name: ""
|
||||||
|
});
|
||||||
|
const searchLabel = ref([
|
||||||
|
{ label: "表情ID", prop: "id", type: "input" },
|
||||||
|
{ label: "表情名称", prop: "name", type: "input" }
|
||||||
|
]);
|
||||||
|
const pagination = ref({
|
||||||
|
total: 0,
|
||||||
|
pageSize: 10,
|
||||||
|
pageSizes: [10, 20, 50, 100],
|
||||||
|
currentPage: 1,
|
||||||
|
background: true
|
||||||
|
});
|
||||||
|
const tableLabel = ref([
|
||||||
|
{
|
||||||
|
label: "ID",
|
||||||
|
prop: "id"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "表情名称",
|
||||||
|
prop: "gift_name"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "图片",
|
||||||
|
prop: "base_image",
|
||||||
|
cellRenderer: ({ row }) => (
|
||||||
|
<el-image
|
||||||
|
fit="cover"
|
||||||
|
preview-teleported={true}
|
||||||
|
src={row.base_image}
|
||||||
|
preview-src-list={Array.of(row.base_image)}
|
||||||
|
class="w-[50px] h-[50px] align-middle"
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "状态",
|
||||||
|
prop: "is_can_buy",
|
||||||
|
cellRenderer: ({ row }) => (
|
||||||
|
<el-tag type={row.is_can_buy === 1 ? 'success' : 'error'}>{row.is_can_buy === 1 ? '可购买' : '禁止购买'}</el-tag>
|
||||||
|
)
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "修改时间",
|
||||||
|
prop: "createtime"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "创建时间",
|
||||||
|
prop: "createtime"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "操作",
|
||||||
|
fixed: "right",
|
||||||
|
width: 210,
|
||||||
|
slot: "operation"
|
||||||
|
}
|
||||||
|
]);
|
||||||
|
const onSearch = async (formData) => {
|
||||||
|
loading.value = true;
|
||||||
|
searchForm.value = { ...formData }
|
||||||
|
const { data, code } = await queryList({
|
||||||
|
...formData,
|
||||||
|
page: pagination.value.currentPage,
|
||||||
|
page_limit: pagination.value.pageSize
|
||||||
|
});
|
||||||
|
if (code) {
|
||||||
|
tableList.value = data.lists;
|
||||||
|
pagination.value.total = data.count;
|
||||||
|
pagination.value.currentPage = data.page;
|
||||||
|
}
|
||||||
|
loading.value = false;
|
||||||
|
};
|
||||||
|
const handleSizeChange = (val: number) => {
|
||||||
|
pagination.value.pageSize = val;
|
||||||
|
onSearch(searchForm.value);
|
||||||
|
};
|
||||||
|
const handleCurrentChange = (val: number) => {
|
||||||
|
pagination.value.currentPage = val;
|
||||||
|
onSearch(searchForm.value);
|
||||||
|
};
|
||||||
|
const handleDelete = async rowData => {
|
||||||
|
const { code } = await removeGiftData({ gid: rowData.gid });
|
||||||
|
if (code) {
|
||||||
|
message(`您删除了礼物名称为【${rowData.gift_name}】的这条数据`, {
|
||||||
|
type: "success"
|
||||||
|
});
|
||||||
|
onSearch(searchForm.value);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
// 新增
|
||||||
|
const openDialog = async (title = "新增", rowData: any) => {
|
||||||
|
const { data, code } = await getGiftInfo({ gid: rowData.gid })
|
||||||
|
addDialog({
|
||||||
|
title: `${title}礼物`,
|
||||||
|
props: {
|
||||||
|
formInline: {
|
||||||
|
gift_name: rowData?.gift_name ?? "",
|
||||||
|
type: data?.type ?? "",
|
||||||
|
label: data?.label ?? "",
|
||||||
|
base_image: rowData?.base_image ?? "",
|
||||||
|
gift_price: rowData?.gift_price ?? "",
|
||||||
|
file_type: data?.file_type ?? "",
|
||||||
|
play_image: data?.play_image ?? "",
|
||||||
|
gift_type: data?.gift_type ?? "",
|
||||||
|
is_public_screen: rowData?.is_public_screen ?? "",
|
||||||
|
is_public_server: rowData?.is_public_server ?? "",
|
||||||
|
is_show: rowData?.is_show ?? "",
|
||||||
|
is_can_buy: rowData?.is_can_buy ?? "",
|
||||||
|
sort: rowData?.sort ?? ""
|
||||||
|
}
|
||||||
|
},
|
||||||
|
width: "40%",
|
||||||
|
closeOnClickModal: false,
|
||||||
|
contentRenderer: () => h(editForm, { ref: formRef, formInline: null }),
|
||||||
|
beforeSure: (done, { options }) => {
|
||||||
|
const FormRef = formRef.value.getRef();
|
||||||
|
const curData = options.props.formInline;
|
||||||
|
const saveData = async form => {
|
||||||
|
const { code, msg } = await addGiftData(form);
|
||||||
|
if (code) {
|
||||||
|
message("新增成功", { type: "success" });
|
||||||
|
onSearch(searchForm.value);
|
||||||
|
done();
|
||||||
|
} else {
|
||||||
|
message(msg, { type: "error" });
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const updateData = async form => {
|
||||||
|
const { code, msg } = await editGiftData({
|
||||||
|
...form,
|
||||||
|
gid: rowData.gid
|
||||||
|
});
|
||||||
|
if (code) {
|
||||||
|
message("修改成功", { type: "success" });
|
||||||
|
onSearch(searchForm.value);
|
||||||
|
done();
|
||||||
|
} else {
|
||||||
|
message(msg, { type: "error" });
|
||||||
|
}
|
||||||
|
};
|
||||||
|
FormRef.validate(valid => {
|
||||||
|
if (valid) {
|
||||||
|
console.log("curData", curData);
|
||||||
|
// 表单规则校验通过
|
||||||
|
if (title === "新增") {
|
||||||
|
// 实际开发先调用新增接口，再进行下面操作
|
||||||
|
saveData(curData);
|
||||||
|
} else {
|
||||||
|
// 实际开发先调用修改接口，再进行下面操作
|
||||||
|
updateData(curData);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
return {
|
||||||
|
searchForm,
|
||||||
|
searchLabel,
|
||||||
|
onSearch,
|
||||||
|
isShow,
|
||||||
|
tableList,
|
||||||
|
tableLabel,
|
||||||
|
pagination,
|
||||||
|
handleSizeChange,
|
||||||
|
handleCurrentChange,
|
||||||
|
loading,
|
||||||
|
handleDelete,
|
||||||
|
openDialog
|
||||||
|
};
|
||||||
|
}
|
||||||
65
src/views/expression/index.vue
Normal file
65
src/views/expression/index.vue
Normal file
@@ -0,0 +1,65 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { onMounted } from "vue";
|
||||||
|
import { useData } from "./hook";
|
||||||
|
import SearchForm from "@/components/SearchForm/index.vue";
|
||||||
|
import { PureTableBar } from "@/components/RePureTableBar";
|
||||||
|
import { deviceDetection } from "@pureadmin/utils";
|
||||||
|
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||||
|
import AddFill from "@iconify-icons/ri/add-circle-line";
|
||||||
|
const {
|
||||||
|
searchLabel,
|
||||||
|
searchForm,
|
||||||
|
onSearch,
|
||||||
|
isShow,
|
||||||
|
tableList,
|
||||||
|
pagination,
|
||||||
|
tableLabel,
|
||||||
|
handleSizeChange,
|
||||||
|
handleCurrentChange,
|
||||||
|
loading,
|
||||||
|
openDialog
|
||||||
|
} = useData();
|
||||||
|
defineOptions({
|
||||||
|
name: "giftList"
|
||||||
|
});
|
||||||
|
onMounted(() => {
|
||||||
|
onSearch(searchForm.value);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="main">
|
||||||
|
<SearchForm class="pb-2" :LabelList="searchLabel" :formData="searchForm" @handleSearch="onSearch" />
|
||||||
|
<div ref="contentRef" :class="['flex', deviceDetection() ? 'flex-wrap' : '']">
|
||||||
|
<PureTableBar title="表情包列表" :class="[isShow && !deviceDetection() ? '!w-[60vw]' : 'w-full']" :columns="tableLabel"
|
||||||
|
@refresh="onSearch">
|
||||||
|
<template #buttons>
|
||||||
|
<el-button type="primary" :icon="useRenderIcon(AddFill)" @click="openDialog('新增', {})">
|
||||||
|
新增表情包
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
<template v-slot="{ size, dynamicColumns }">
|
||||||
|
<pure-table ref="tableRef" align-whole="center" showOverflowTooltip table-layout="auto" default-expand-all
|
||||||
|
:loading="loading" :size="size" row-key="id" adaptive :adaptiveConfig="{ offsetBottom: 108 }"
|
||||||
|
:data="tableList" :columns="dynamicColumns" :pagination="{ ...pagination, size }" :header-cell-style="{
|
||||||
|
background: 'var(--el-fill-color-light)',
|
||||||
|
color: 'var(--el-text-color-primary)'
|
||||||
|
}" @page-current-change="handleCurrentChange" @page-size-change="handleSizeChange">
|
||||||
|
<template #operation="{ row }">
|
||||||
|
<!-- <el-button link type="primary" :size="size" @click="openDialog('编辑', row)">
|
||||||
|
编辑
|
||||||
|
</el-button>
|
||||||
|
<el-popconfirm :title="`是否确认删除礼物名称为【${row.gift_name}】的这条数据`" @confirm="handleDelete(row)">
|
||||||
|
<template #reference>
|
||||||
|
<el-button link type="primary" :size="size"> 删除 </el-button>
|
||||||
|
</template>
|
||||||
|
</el-popconfirm> -->
|
||||||
|
</template>
|
||||||
|
</pure-table>
|
||||||
|
</template>
|
||||||
|
</PureTableBar>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<style scoped lang="scss"></style>
|
||||||
Reference in New Issue
Block a user