更新
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