|
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333 |
- <template>
- <div class="page justify-around">
- <div class="addbtn">
- <el-form :inline="true" :model="formInline" class="demo-form-inline">
- <el-form-item :label="$t('videoList.phone')">
- <el-input v-model="formInline.phone" :placeholder="$t('videoList.phonePlaceholder')" clearable />
- </el-form-item>
- <el-form-item :label="$t('videoList.text')">
- <el-input v-model="formInline.paperwork" :placeholder="$t('videoList.textPlaceholder')" clearable />
- </el-form-item>
- <el-form-item :label="$t('videoList.type')">
- <el-select
- v-model="formInline.videoType"
- :placeholder="$t('videoList.typePlaceholder')"
- clearable
- >
- <el-option :label="$t('videoList.portrait')" value="1" />
- <el-option :label="$t('videoList.transversePlate')" value="2" />
- </el-select>
- </el-form-item>
- <el-form-item :label="$t('videoList.status')">
- <el-select
- v-model="formInline.isDel"
- :placeholder="$t('videoList.statusPlaceholder')"
- clearable
- >
- <el-option :label="$t('videoList.notDeleted')" value="0" />
- <el-option :label="$t('videoList.deleted')" value="1" />
- </el-select>
- </el-form-item>
- <el-form-item :label="$t('videoList.time')">
- <el-date-picker
- v-model="formInline.time"
- type="daterange"
- range-separator="To"
- start-placeholder="Start date"
- end-placeholder="End date"
- value-format="YYYY-MM-DD"
- :default-value="new Date()"
- />
- </el-form-item>
- <el-form-item>
- <el-button type="primary" @click="getListData()">{{ $t('videoList.search') }}</el-button>
- </el-form-item>
- </el-form>
- </div>
-
- <el-table
- :data="tableData"
- style="width: 100%; height: 90%"
- size="large"
- align="center"
- border
- >
- <el-table-column
- prop="videoType"
- :label="$t('videoList.type')"
- align="center"
- >
- <template #default="scope">
- {{ getVideoType(scope.row.videoType) }}
- </template>
- </el-table-column>
-
- <el-table-column
- prop="paperwork"
- :label="$t('videoList.text')"
- align="center"
- />
- <el-table-column
- prop="isDel"
- :label="$t('videoList.status')"
- align="center"
- >
- <template #default="scope">
- {{ getIsDel(scope.row.isDel) }}
- </template>
- </el-table-column>
- <el-table-column
- prop="title"
- :label="$t('videoList.title')"
- align="center"
- />
- <el-table-column
- prop="coverImg"
- :label="$t('videoList.coverImg')"
- align="center"
- >
- <template #default="scope">
- <img :src="scope.row.coverImg" width="50" height="50" alt="" />
- </template>
- </el-table-column>
- <el-table-column
- prop="videoPlayUrl"
- :label="$t('videoList.videoPlayUrl')"
- align="center"
- />
- <el-table-column
- prop="videoTime"
- :label="$t('videoList.videoTime')"
- align="center"
- >
- </el-table-column>
- <el-table-column
- prop="videoSize"
- :label="$t('videoList.videoSize')"
- align="center"
- />
- <el-table-column
- prop="videoMsg"
- :label="$t('videoList.videoMsg')"
- align="center"
- />
- <el-table-column
- prop="costPoints"
- :label="$t('videoList.costPoints')"
- align="center"
- />
- <el-table-column
- prop="costPointsDetail"
- :label="$t('videoList.costPointsDetail')"
- align="center"
- />
- <el-table-column
- prop="createDate"
- :label="$t('videoList.createDate')"
- align="center"
- >
- <template #default="scope">
- {{ getDate(scope.row.createDate) }}
- </template>
- </el-table-column>
-
- <el-table-column
- fixed="right"
- :label="$t('keyMangage.operations')"
- align="center"
- >
- <template #default="scope">
- <el-button link type="primary" size="small" @click="showDetail(scope.row.id)">{{$t('videoList.view')}}</el-button>
- <el-button v-if="scope.row.isDel === 0" link type="primary" size="small" @click="confirmDel(scope.row.id)">{{$t('videoList.del')}}</el-button>
- </template>
- </el-table-column>
-
- </el-table>
-
- <div class="pagination">
- <el-pagination
- v-model:current-page="pageNum"
- v-model:page-size="pageSize"
- :page-sizes="[10, 50, 100]"
- :small="false"
- :disabled="false"
- :background="true"
- layout="total, sizes, prev, pager, next, jumper"
- :total="total"
- @size-change="handleSizeChange"
- @current-change="handleCurrentChange"
- />
- </div>
- <el-dialog v-model="dialogVisible" v-if="dialogVisible" :title="`${$t('videoList.videoDetail')}:`" width="40%">
- <el-form :model="form" label-width="120px">
- <el-form-item :label="$t('videoList.name')">
- <el-input v-model="form.title" />
- </el-form-item>
- <el-form-item :label="$t('videoList.videType')">
- <el-radio-group v-model="form.videoType">
- <el-radio :label="1">{{$t('videoList.portrait')}}</el-radio>
- <el-radio :label="2">{{$t('videoList.transversePlate')}}</el-radio>
- </el-radio-group>
- </el-form-item>
- <el-form-item :label="$t('videoList.text')">
- <el-input v-model="form.paperwork" type="textarea" />
- </el-form-item>
- <el-form-item :label="$t('videoList.coverImg')">
- <img :src="form.coverImg" alt="" style="width:100%;max-height: 200px;">
- </el-form-item>
- <el-form-item :label="$t('videoList.videoPlayUrl')">
- <el-input v-model="form.videoPlayUrl" />
- <!-- <video :src="form.videoPlayUrl" style="width:100%;max-height: 300px;"></video> -->
- </el-form-item>
- <el-form-item :label="$t('videoList.videoTime')">
- <el-input v-model="form.videoTime" />
- </el-form-item>
- <el-form-item :label="$t('videoList.createDate')">
- <el-input v-model="form.createDate" />
- </el-form-item>
- <el-form-item :label="$t('videoList.costPoints')">
- <el-input v-model="form.costPoints" />
- </el-form-item>
- <el-form-item :label="$t('videoList.costPointsDetail')">
- <el-input v-model="form.costPointsDetail" />
- </el-form-item>
- <el-form-item>
- <el-button @click="dialogVisible = false">{{ $t('videoList.close') }}</el-button>
- </el-form-item>
- </el-form>
- </el-dialog>
- </div>
- </template>
- <script setup>
- //#region 导入
-
- import { videoListApi, videoListFindByIdApi, videoListDelApi } from '@/apis/userManage.js'
-
- import { useI18n } from "vue-i18n";
-
- import dayjs from "dayjs";
-
- import { useRoute, useRouter } from "vue-router";
-
- const route = useRoute();
- const router = useRouter();
- const { locale } = useI18n();
- const lanChange = ref(locale);
-
- const tableData = ref([]);
-
- const pageNum = ref(1);
- const pageSize = ref(10);
- const total = ref(0);
-
- const getVideoType = (val) => {
- return val === 1 ? "竖版" : "横版";
- };
- const getIsDel = (val) => {
- return val === 1 ? "已删除" : "未删除";
- };
-
- const getDate = (val) => {
- return dayjs(val).format("YYYY-MM-DD HH:mm:ss");
- };
-
- const handleSizeChange = (val) => {
- pageSize.value = val;
- getListData(pageNum.value, pageSize.value);
- };
-
- const handleCurrentChange = (val) => {
- pageNum.value = val;
- getListData(pageNum.value, pageSize.value);
- };
-
- const formInline = ref({
- phone: route.query.phone || '',
- productTitle: '',
- time: ''
- })
-
- const getListData = async (PageNum, PageSize) => {
- try {
- let data = {
- PageNum: PageNum || 1,
- PageSize: PageSize || 10,
- phone: formInline.value.phone,
- projectType: 2,
- productTitle: formInline.value.productTitle,
- startDate: formInline.value.time ? formInline.value.time[0] : '',
- endDate: formInline.value.time ? formInline.value.time[1] : '',
- id: route.query.id || '',
- isDel: formInline.value.isDel,
- videoType: formInline.value.videoType,
- paperwork: formInline.value.paperwork
- }
- const res = await videoListApi(data);
- tableData.value = res.data.list;
- total.value = res.data.total * 1;
- } catch (error) {
- console.log(error, "err");
- }
- };
- // 查看详情
- const dialogVisible = ref(false)
- const form = ref({})
- function showDetail(id) {
- videoListFindByIdApi(id).then(res => {
- if(res.code === 200){
- dialogVisible.value = true
- form.value = res.data
- }
- })
- }
-
- function confirmDel(id) {
- ElMessageBox.confirm('你确定要删除吗?').then(() => {
- videoListDelApi(id).then(res => {
- if (res.code == 200) {
- ElMessage.success("删除成功!");
- getListData(1, 10)
- }
- })
- done()
- }).catch(() => {
- // catch error
- })
- }
- onMounted(() => {
- getListData(1, 10);
- });
- </script>
-
- <style lang="scss" scoped>
- .page {
- height: calc(100vh - 80px);
- // height: calc(100vh - 80px);
- background-color: #ffffff;
- border-radius: 30px 0 0 0;
- overflow: hidden;
- padding: 10vh;
- .addbtn {
- margin-bottom: 2vh;
- }
- .formData {
- padding: 5vh 3vh;
- }
-
- .pagination {
- position: fixed;
- left: 55%;
- bottom: 8vh;
- transform: translateX(-50%);
- border-radius: 5px;
- padding: 10px 20px;
- z-index: 99;
- transition: all 0.3s;
- cursor: pointer;
- &:hover {
- background-color: #b8b8b873;
- }
- }
- }
- </style>
-
|