邃芒慧影管理端
Du kannst nicht mehr als 25 Themen auswählen Themen müssen entweder mit einem Buchstaben oder einer Ziffer beginnen. Sie können Bindestriche („-“) enthalten und bis zu 35 Zeichen lang sein.
 
 
 
 

379 Zeilen
8.7 KiB

  1. <template>
  2. <div class="page justify-around">
  3. <div class="addbtn">
  4. <el-button type="primary" @click="dialogVisible = true"><el-icon><i-ep-plus /></el-icon> 新增</el-button>
  5. </div>
  6. <el-table
  7. :data="tableData"
  8. style="width: 100%; height: 90%"
  9. size="large"
  10. align="center"
  11. border
  12. >
  13. <el-table-column
  14. prop="name"
  15. :label="$t('businessMangage.name')"
  16. align="center"
  17. />
  18. <el-table-column
  19. prop="address"
  20. :label="$t('businessMangage.address')"
  21. align="center"
  22. />
  23. <el-table-column
  24. prop="status"
  25. :label="$t('businessMangage.status')"
  26. align="center"
  27. >
  28. <template #default="scope">
  29. <span
  30. :style="1 * scope.row.status ? 'color: #ff0000' : 'color: #36db43'"
  31. >{{ getStatus(scope.row.status) }}</span
  32. >
  33. </template>
  34. </el-table-column>
  35. <el-table-column
  36. prop="code"
  37. :label="$t('businessMangage.code')"
  38. align="center"
  39. />
  40. <el-table-column
  41. prop="createTime"
  42. :label="$t('businessMangage.createTime')"
  43. align="center"
  44. >
  45. <template #default="scope">
  46. {{ getDate(scope.row.createTime) }}
  47. </template>
  48. </el-table-column>
  49. <el-table-column
  50. prop="createTime"
  51. label="时长(秒)"
  52. align="center"
  53. >
  54. <template #default="scope">
  55. {{ scope.row.remainingTimes }}
  56. </template>
  57. </el-table-column>
  58. <el-table-column
  59. fixed="right"
  60. :label="$t('keyMangage.operations')"
  61. width="400"
  62. align="center"
  63. >
  64. <template #default="scope">
  65. <el-button
  66. link
  67. type="primary"
  68. size="small"
  69. @click="showDetail(scope.row.id)"
  70. >查看密钥</el-button>
  71. <el-button link type="primary" size="small" @click="setTime(scope.row.id)">设置时长</el-button>
  72. </template>
  73. </el-table-column>
  74. </el-table>
  75. <el-dialog
  76. v-model="dialogVisible"
  77. :title="$t('businessMangage.addNew')"
  78. width="35%"
  79. :before-close="handleClose"
  80. >
  81. <div class="formData">
  82. <el-form
  83. ref="ruleForm"
  84. label-position="left"
  85. label-width="120px"
  86. :model="formData"
  87. :rules="rules"
  88. >
  89. <el-form-item :label="$t('businessMangage.name') + ':'" prop="name">
  90. <el-input
  91. v-model="formData.name"
  92. :placeholder="$t('businessMangage.nameInputText')"
  93. />
  94. </el-form-item>
  95. <el-form-item
  96. :label="$t('businessMangage.address') + ':'"
  97. prop="address"
  98. >
  99. <el-input
  100. v-model="formData.address"
  101. :placeholder="$t('businessMangage.addressInputText')"
  102. />
  103. </el-form-item>
  104. <el-form-item :label="$t('businessMangage.code') + ':'" prop="code">
  105. <el-input
  106. v-model="formData.code"
  107. :placeholder="$t('businessMangage.codeInputText')"
  108. />
  109. </el-form-item>
  110. <el-form-item
  111. :label="$t('businessMangage.accessMethod') + ':'"
  112. prop="type"
  113. >
  114. <el-select
  115. v-model="formData.type"
  116. :placeholder="$t('businessMangage.typeInputText')"
  117. clearable
  118. disabled
  119. >
  120. <el-option
  121. v-for="(item, index) in accessMethods"
  122. :key="index"
  123. :label="item.label"
  124. :value="item.value"
  125. />
  126. </el-select>
  127. </el-form-item>
  128. </el-form>
  129. </div>
  130. <template #footer>
  131. <span class="dialog-footer">
  132. <el-button @click="dialogVisible = false">{{
  133. $t("businessMangage.cancel")
  134. }}</el-button>
  135. <el-button type="primary" @click="addNew(ruleForm)">
  136. {{ $t("businessMangage.confirm") }}
  137. </el-button>
  138. </span>
  139. </template>
  140. </el-dialog>
  141. <div class="pagination">
  142. <el-pagination
  143. v-model:current-page="pageNum"
  144. v-model:page-size="pageSize"
  145. :page-sizes="[10, 50, 100]"
  146. :small="false"
  147. :disabled="false"
  148. :background="true"
  149. layout="total, sizes, prev, pager, next, jumper"
  150. :total="total"
  151. @size-change="handleSizeChange"
  152. @current-change="handleCurrentChange"
  153. />
  154. </div>
  155. </div>
  156. </template>
  157. <!-- videoType==1为竖,==2为横 -->
  158. <script setup>
  159. //#region 导入
  160. import { businessListApi, addBusinessApi, setRemainingTimes, saveMallUserInfo } from '@/apis/apiManage.js'
  161. import { useI18n } from "vue-i18n";
  162. import dayjs from "dayjs";
  163. import { useRoute, useRouter } from "vue-router";
  164. const route = useRoute();
  165. const router = useRouter();
  166. const { locale } = useI18n();
  167. const lanChange = ref(locale);
  168. const tableData = ref([]);
  169. const dialogVisible = ref(false);
  170. const pageNum = ref(1);
  171. const pageSize = ref(10);
  172. const total = ref(0);
  173. const getStatus = (val) => {
  174. return val * 1 ? "锁定" : "正常";
  175. };
  176. const getDate = (val) => {
  177. return dayjs(val).format("YYYY-MM-DD");
  178. };
  179. const handleSizeChange = (val) => {
  180. pageSize.value = val;
  181. getListData(pageNum.value, pageSize.value);
  182. };
  183. const handleCurrentChange = (val) => {
  184. pageNum.value = val;
  185. getListData(pageNum.value, pageSize.value);
  186. };
  187. const getListData = async (PageNum, PageSize) => {
  188. try {
  189. const res = await businessListApi(PageNum, PageSize, 2);
  190. console.log(res, "res");
  191. tableData.value = res.data.list;
  192. total.value = res.data.total * 1;
  193. } catch (error) {
  194. console.log(error, "err");
  195. }
  196. };
  197. const formData = ref({
  198. name: "",
  199. address: "",
  200. code: "",
  201. type: 2,
  202. });
  203. const rules = {
  204. name: [
  205. {
  206. required: true,
  207. message: "Please input name",
  208. trigger: "blur",
  209. },
  210. ],
  211. address: [
  212. {
  213. required: true,
  214. message: "Please input address",
  215. trigger: "blur",
  216. },
  217. ],
  218. code: [
  219. {
  220. required: true,
  221. message: "Please input code",
  222. trigger: "blur",
  223. },
  224. ],
  225. type: [
  226. {
  227. required: true,
  228. message: "Please select access methods",
  229. trigger: "blur",
  230. },
  231. ],
  232. };
  233. const accessMethods = ref([
  234. {
  235. label: "api接入",
  236. value: 1,
  237. },
  238. {
  239. label: "私有化接入",
  240. value: 2,
  241. },
  242. ]);
  243. const handleClose = () => {
  244. dialogVisible.value = false;
  245. setTimeout(() => {
  246. formData.value = {
  247. name: "",
  248. address: "",
  249. code: "",
  250. type: 1,
  251. };
  252. }, 500);
  253. };
  254. const ruleForm = ref();
  255. const addNew = async (refForm) => {
  256. if (!refForm) return;
  257. await refForm.validate(async (valid, fields) => {
  258. if (valid) {
  259. const data = formData.value;
  260. try {
  261. const res = await addBusinessApi(data);
  262. console.log(res, "res");
  263. if (res.code == 200) {
  264. ElMessage.success("添加成功!");
  265. dialogVisible.value = false;
  266. }
  267. getListData(1, 10);
  268. pageNum.value = 1;
  269. pageSize.value = 10;
  270. } catch (error) {
  271. console.log(error, "err");
  272. ElMessage.error(error.message);
  273. }
  274. } else {
  275. ElMessage.error("请完善信息!");
  276. }
  277. });
  278. };
  279. // 查看时长
  280. const showDetail = (id) => {
  281. router.push({
  282. path: "/businessCheck",
  283. query: {
  284. id,
  285. },
  286. });
  287. }
  288. // 设置时长
  289. const setTime = (id) => {
  290. ElMessageBox.prompt('请输入时长(秒)', '设置时长', {
  291. confirmButtonText: 'OK',
  292. cancelButtonText: 'Cancel',
  293. inputPattern: /^[0-9]*$/,
  294. inputErrorMessage: '请输入数字',
  295. beforeClose: async (action, instance, done) => {
  296. if (action == "confirm") {//点击确认请求接口
  297. let res = await setRemainingTimes({ id: id, times: instance.inputValue })
  298. if (res.code === 200) {
  299. // 通过监测关闭
  300. ElMessage.success('设置成功')
  301. done();
  302. } else {
  303. ElMessage.error(res.message)
  304. }
  305. } else {
  306. //点击取消关闭
  307. done();
  308. }
  309. }
  310. })
  311. }
  312. onMounted(() => {
  313. getListData(1, 10);
  314. });
  315. </script>
  316. <style lang="scss" scoped>
  317. .page {
  318. height: calc(100vh - 80px);
  319. // height: calc(100vh - 80px);
  320. background-color: #ffffff;
  321. border-radius: 30px 0 0 0;
  322. overflow: hidden;
  323. padding: 10vh;
  324. .addbtn {
  325. margin-bottom: 2vh;
  326. }
  327. .formData {
  328. padding: 5vh 3vh;
  329. }
  330. .pagination {
  331. position: fixed;
  332. left: 55%;
  333. bottom: 8vh;
  334. transform: translateX(-50%);
  335. border-radius: 5px;
  336. padding: 10px 20px;
  337. z-index: 99;
  338. transition: all 0.3s;
  339. cursor: pointer;
  340. &:hover {
  341. background-color: #b8b8b873;
  342. }
  343. }
  344. }
  345. </style>