邃芒慧影管理端
Nevar pievienot vairāk kā 25 tēmas Tēmai ir jāsākas ar burtu vai ciparu, tā var saturēt domu zīmes ('-') un var būt līdz 35 simboliem gara.
 
 
 
 

333 rindas
10 KiB

  1. <template>
  2. <div class="page justify-around">
  3. <div class="addbtn">
  4. <el-form :inline="true" :model="formInline" class="demo-form-inline">
  5. <el-form-item :label="$t('videoList.phone')">
  6. <el-input v-model="formInline.phone" :placeholder="$t('videoList.phonePlaceholder')" clearable />
  7. </el-form-item>
  8. <el-form-item :label="$t('videoList.text')">
  9. <el-input v-model="formInline.paperwork" :placeholder="$t('videoList.textPlaceholder')" clearable />
  10. </el-form-item>
  11. <el-form-item :label="$t('videoList.type')">
  12. <el-select
  13. v-model="formInline.videoType"
  14. :placeholder="$t('videoList.typePlaceholder')"
  15. clearable
  16. >
  17. <el-option :label="$t('videoList.portrait')" value="1" />
  18. <el-option :label="$t('videoList.transversePlate')" value="2" />
  19. </el-select>
  20. </el-form-item>
  21. <el-form-item :label="$t('videoList.status')">
  22. <el-select
  23. v-model="formInline.isDel"
  24. :placeholder="$t('videoList.statusPlaceholder')"
  25. clearable
  26. >
  27. <el-option :label="$t('videoList.notDeleted')" value="0" />
  28. <el-option :label="$t('videoList.deleted')" value="1" />
  29. </el-select>
  30. </el-form-item>
  31. <el-form-item :label="$t('videoList.time')">
  32. <el-date-picker
  33. v-model="formInline.time"
  34. type="daterange"
  35. range-separator="To"
  36. start-placeholder="Start date"
  37. end-placeholder="End date"
  38. value-format="YYYY-MM-DD"
  39. :default-value="new Date()"
  40. />
  41. </el-form-item>
  42. <el-form-item>
  43. <el-button type="primary" @click="getListData()">{{ $t('videoList.search') }}</el-button>
  44. </el-form-item>
  45. </el-form>
  46. </div>
  47. <el-table
  48. :data="tableData"
  49. style="width: 100%; height: 90%"
  50. size="large"
  51. align="center"
  52. border
  53. >
  54. <el-table-column
  55. prop="videoType"
  56. :label="$t('videoList.type')"
  57. align="center"
  58. >
  59. <template #default="scope">
  60. {{ getVideoType(scope.row.videoType) }}
  61. </template>
  62. </el-table-column>
  63. <el-table-column
  64. prop="paperwork"
  65. :label="$t('videoList.text')"
  66. align="center"
  67. />
  68. <el-table-column
  69. prop="isDel"
  70. :label="$t('videoList.status')"
  71. align="center"
  72. >
  73. <template #default="scope">
  74. {{ getIsDel(scope.row.isDel) }}
  75. </template>
  76. </el-table-column>
  77. <el-table-column
  78. prop="title"
  79. :label="$t('videoList.title')"
  80. align="center"
  81. />
  82. <el-table-column
  83. prop="coverImg"
  84. :label="$t('videoList.coverImg')"
  85. align="center"
  86. >
  87. <template #default="scope">
  88. <img :src="scope.row.coverImg" width="50" height="50" alt="" />
  89. </template>
  90. </el-table-column>
  91. <el-table-column
  92. prop="videoPlayUrl"
  93. :label="$t('videoList.videoPlayUrl')"
  94. align="center"
  95. />
  96. <el-table-column
  97. prop="videoTime"
  98. :label="$t('videoList.videoTime')"
  99. align="center"
  100. >
  101. </el-table-column>
  102. <el-table-column
  103. prop="videoSize"
  104. :label="$t('videoList.videoSize')"
  105. align="center"
  106. />
  107. <el-table-column
  108. prop="videoMsg"
  109. :label="$t('videoList.videoMsg')"
  110. align="center"
  111. />
  112. <el-table-column
  113. prop="costPoints"
  114. :label="$t('videoList.costPoints')"
  115. align="center"
  116. />
  117. <el-table-column
  118. prop="costPointsDetail"
  119. :label="$t('videoList.costPointsDetail')"
  120. align="center"
  121. />
  122. <el-table-column
  123. prop="createDate"
  124. :label="$t('videoList.createDate')"
  125. align="center"
  126. >
  127. <template #default="scope">
  128. {{ getDate(scope.row.createDate) }}
  129. </template>
  130. </el-table-column>
  131. <el-table-column
  132. fixed="right"
  133. :label="$t('keyMangage.operations')"
  134. align="center"
  135. >
  136. <template #default="scope">
  137. <el-button link type="primary" size="small" @click="showDetail(scope.row.id)">{{$t('videoList.view')}}</el-button>
  138. <el-button v-if="scope.row.isDel === 0" link type="primary" size="small" @click="confirmDel(scope.row.id)">{{$t('videoList.del')}}</el-button>
  139. </template>
  140. </el-table-column>
  141. </el-table>
  142. <div class="pagination">
  143. <el-pagination
  144. v-model:current-page="pageNum"
  145. v-model:page-size="pageSize"
  146. :page-sizes="[10, 50, 100]"
  147. :small="false"
  148. :disabled="false"
  149. :background="true"
  150. layout="total, sizes, prev, pager, next, jumper"
  151. :total="total"
  152. @size-change="handleSizeChange"
  153. @current-change="handleCurrentChange"
  154. />
  155. </div>
  156. <el-dialog v-model="dialogVisible" v-if="dialogVisible" :title="`${$t('videoList.videoDetail')}:`" width="40%">
  157. <el-form :model="form" label-width="120px">
  158. <el-form-item :label="$t('videoList.name')">
  159. <el-input v-model="form.title" />
  160. </el-form-item>
  161. <el-form-item :label="$t('videoList.videType')">
  162. <el-radio-group v-model="form.videoType">
  163. <el-radio :label="1">{{$t('videoList.portrait')}}</el-radio>
  164. <el-radio :label="2">{{$t('videoList.transversePlate')}}</el-radio>
  165. </el-radio-group>
  166. </el-form-item>
  167. <el-form-item :label="$t('videoList.text')">
  168. <el-input v-model="form.paperwork" type="textarea" />
  169. </el-form-item>
  170. <el-form-item :label="$t('videoList.coverImg')">
  171. <img :src="form.coverImg" alt="" style="width:100%;max-height: 200px;">
  172. </el-form-item>
  173. <el-form-item :label="$t('videoList.videoPlayUrl')">
  174. <el-input v-model="form.videoPlayUrl" />
  175. <!-- <video :src="form.videoPlayUrl" style="width:100%;max-height: 300px;"></video> -->
  176. </el-form-item>
  177. <el-form-item :label="$t('videoList.videoTime')">
  178. <el-input v-model="form.videoTime" />
  179. </el-form-item>
  180. <el-form-item :label="$t('videoList.createDate')">
  181. <el-input v-model="form.createDate" />
  182. </el-form-item>
  183. <el-form-item :label="$t('videoList.costPoints')">
  184. <el-input v-model="form.costPoints" />
  185. </el-form-item>
  186. <el-form-item :label="$t('videoList.costPointsDetail')">
  187. <el-input v-model="form.costPointsDetail" />
  188. </el-form-item>
  189. <el-form-item>
  190. <el-button @click="dialogVisible = false">{{ $t('videoList.close') }}</el-button>
  191. </el-form-item>
  192. </el-form>
  193. </el-dialog>
  194. </div>
  195. </template>
  196. <script setup>
  197. //#region 导入
  198. import { videoListApi, videoListFindByIdApi, videoListDelApi } from '@/apis/userManage.js'
  199. import { useI18n } from "vue-i18n";
  200. import dayjs from "dayjs";
  201. import { useRoute, useRouter } from "vue-router";
  202. const route = useRoute();
  203. const router = useRouter();
  204. const { locale } = useI18n();
  205. const lanChange = ref(locale);
  206. const tableData = ref([]);
  207. const pageNum = ref(1);
  208. const pageSize = ref(10);
  209. const total = ref(0);
  210. const getVideoType = (val) => {
  211. return val === 1 ? "竖版" : "横版";
  212. };
  213. const getIsDel = (val) => {
  214. return val === 1 ? "已删除" : "未删除";
  215. };
  216. const getDate = (val) => {
  217. return dayjs(val).format("YYYY-MM-DD HH:mm:ss");
  218. };
  219. const handleSizeChange = (val) => {
  220. pageSize.value = val;
  221. getListData(pageNum.value, pageSize.value);
  222. };
  223. const handleCurrentChange = (val) => {
  224. pageNum.value = val;
  225. getListData(pageNum.value, pageSize.value);
  226. };
  227. const formInline = ref({
  228. phone: route.query.phone || '',
  229. productTitle: '',
  230. time: ''
  231. })
  232. const getListData = async (PageNum, PageSize) => {
  233. try {
  234. let data = {
  235. PageNum: PageNum || 1,
  236. PageSize: PageSize || 10,
  237. phone: formInline.value.phone,
  238. projectType: 2,
  239. productTitle: formInline.value.productTitle,
  240. startDate: formInline.value.time ? formInline.value.time[0] : '',
  241. endDate: formInline.value.time ? formInline.value.time[1] : '',
  242. id: route.query.id || '',
  243. isDel: formInline.value.isDel,
  244. videoType: formInline.value.videoType,
  245. paperwork: formInline.value.paperwork
  246. }
  247. const res = await videoListApi(data);
  248. tableData.value = res.data.list;
  249. total.value = res.data.total * 1;
  250. } catch (error) {
  251. console.log(error, "err");
  252. }
  253. };
  254. // 查看详情
  255. const dialogVisible = ref(false)
  256. const form = ref({})
  257. function showDetail(id) {
  258. videoListFindByIdApi(id).then(res => {
  259. if(res.code === 200){
  260. dialogVisible.value = true
  261. form.value = res.data
  262. }
  263. })
  264. }
  265. function confirmDel(id) {
  266. ElMessageBox.confirm('你确定要删除吗?').then(() => {
  267. videoListDelApi(id).then(res => {
  268. if (res.code == 200) {
  269. ElMessage.success("删除成功!");
  270. getListData(1, 10)
  271. }
  272. })
  273. done()
  274. }).catch(() => {
  275. // catch error
  276. })
  277. }
  278. onMounted(() => {
  279. getListData(1, 10);
  280. });
  281. </script>
  282. <style lang="scss" scoped>
  283. .page {
  284. height: calc(100vh - 80px);
  285. // height: calc(100vh - 80px);
  286. background-color: #ffffff;
  287. border-radius: 30px 0 0 0;
  288. overflow: hidden;
  289. padding: 10vh;
  290. .addbtn {
  291. margin-bottom: 2vh;
  292. }
  293. .formData {
  294. padding: 5vh 3vh;
  295. }
  296. .pagination {
  297. position: fixed;
  298. left: 55%;
  299. bottom: 8vh;
  300. transform: translateX(-50%);
  301. border-radius: 5px;
  302. padding: 10px 20px;
  303. z-index: 99;
  304. transition: all 0.3s;
  305. cursor: pointer;
  306. &:hover {
  307. background-color: #b8b8b873;
  308. }
  309. }
  310. }
  311. </style>