邃芒慧影管理端
No puede seleccionar más de 25 temas Los temas deben comenzar con una letra o número, pueden incluir guiones ('-') y pueden tener hasta 35 caracteres de largo.
 
 
 
 

520 líneas
13 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> {{$t('apiManage.add')}}</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="$t('apiManage.time')"
  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. >{{$t('apiManage.viewKey')}}</el-button>
  71. <el-button link type="primary" size="small" @click="loginAccount(scope.row)">{{ scope.row.mallUserInfo ? $t('apiManage.editAccount') : $t('apiManage.eddAccount')}}</el-button>
  72. <el-button link type="primary" size="small" @click="setTime(scope.row.id)">{{$t('apiManage.setTime')}}</el-button>
  73. <el-button link type="primary" size="small" @click="associationTemp(scope.row.id)">{{$t('apiManage.associationTemp')}}</el-button>
  74. </template>
  75. </el-table-column>
  76. </el-table>
  77. <el-dialog
  78. v-model="dialogVisible"
  79. v-if="dialogVisible"
  80. :title="$t('businessMangage.addNew')"
  81. width="35%"
  82. :before-close="handleClose"
  83. >
  84. <div class="formData">
  85. <el-form
  86. ref="ruleForm"
  87. label-position="left"
  88. label-width="120px"
  89. :model="formData"
  90. :rules="rules"
  91. >
  92. <el-form-item :label="$t('businessMangage.name') + ':'" prop="name">
  93. <el-input
  94. v-model="formData.name"
  95. :placeholder="$t('businessMangage.nameInputText')"
  96. />
  97. </el-form-item>
  98. <el-form-item
  99. :label="$t('businessMangage.address') + ':'"
  100. prop="address"
  101. >
  102. <el-input
  103. v-model="formData.address"
  104. :placeholder="$t('businessMangage.addressInputText')"
  105. />
  106. </el-form-item>
  107. <el-form-item :label="$t('businessMangage.code') + ':'" prop="code">
  108. <el-input
  109. v-model="formData.code"
  110. :placeholder="$t('businessMangage.codeInputText')"
  111. />
  112. </el-form-item>
  113. <el-form-item
  114. :label="$t('businessMangage.accessMethod') + ':'"
  115. prop="type"
  116. >
  117. <el-select
  118. v-model="formData.type"
  119. :placeholder="$t('businessMangage.typeInputText')"
  120. clearable
  121. disabled
  122. >
  123. <el-option
  124. v-for="(item, index) in accessMethods"
  125. :key="index"
  126. :label="item.label"
  127. :value="item.value"
  128. />
  129. </el-select>
  130. </el-form-item>
  131. </el-form>
  132. </div>
  133. <template #footer>
  134. <span class="dialog-footer">
  135. <el-button @click="dialogVisible = false">{{
  136. $t("businessMangage.cancel")
  137. }}</el-button>
  138. <el-button type="primary" @click="addNew(ruleForm)">
  139. {{ $t("businessMangage.confirm") }}
  140. </el-button>
  141. </span>
  142. </template>
  143. </el-dialog>
  144. <!-- 登录账号 -->
  145. <el-dialog v-model="accountDialogVisible" v-if="accountDialogVisible" :title="$t('apiManage.loginAccount')" width="35%" :before-close="handleClose" >
  146. <el-form ref="ruleForm2" label-position="left" label-width="120px" :model="formData2" :rules="rules2">
  147. <el-form-item :label="$t('apiManage.username')" prop="username">
  148. <el-input :disabled="mallUserInfoFlag" v-model="formData2.username" :placeholder="$t('businessMangage.nameInputText')" />
  149. </el-form-item>
  150. <el-form-item :label="$t('apiManage.name')" prop="name" >
  151. <el-input v-model="formData2.name" :placeholder="$t('businessMangage.addressInputText')" />
  152. </el-form-item>
  153. <el-form-item :label="$t('apiManage.pass')" prop="password">
  154. <el-input v-model="formData2.password" :placeholder="$t('businessMangage.codeInputText')" />
  155. </el-form-item>
  156. <el-form-item :label="$t('apiManage.phone')" prop="phone">
  157. <el-input v-model="formData2.phone" :placeholder="$t('businessMangage.codeInputText')" />
  158. </el-form-item>
  159. </el-form>
  160. <template #footer>
  161. <span class="dialog-footer">
  162. <el-button @click="accountDialogVisible = false">{{
  163. $t("businessMangage.cancel")
  164. }}</el-button>
  165. <el-button type="primary" @click="addAccount(ruleForm2)">
  166. {{ $t("businessMangage.confirm") }}
  167. </el-button>
  168. </span>
  169. </template>
  170. </el-dialog>
  171. <el-dialog v-model="modelDialogVisible" v-if="modelDialogVisible" :title="$t('apiManage.associationTemp')" width="60%" :before-close="handleClose" >
  172. <model :serviceId="serviceId" @close="handleClose"></model>
  173. </el-dialog>
  174. <div class="pagination">
  175. <el-pagination
  176. v-model:current-page="pageNum"
  177. v-model:page-size="pageSize"
  178. :page-sizes="[10, 50, 100]"
  179. :small="false"
  180. :disabled="false"
  181. :background="true"
  182. layout="total, sizes, prev, pager, next, jumper"
  183. :total="total"
  184. @size-change="handleSizeChange"
  185. @current-change="handleCurrentChange"
  186. />
  187. </div>
  188. </div>
  189. </template>
  190. <!-- videoType==1为竖,==2为横 -->
  191. <script setup>
  192. //#region 导入
  193. import { linkEmits } from "element-plus";
  194. import { getCurrentInstance } from "vue";
  195. import { businessListApi, addBusinessApi, setRemainingTimes, saveMallUserInfo, getMallUserInfo } from '@/apis/apiManage.js'
  196. import { useI18n } from "vue-i18n";
  197. import dayjs from "dayjs";
  198. import { useRoute, useRouter } from "vue-router";
  199. import model from './model.vue'
  200. const route = useRoute();
  201. const router = useRouter();
  202. const { locale } = useI18n();
  203. const lanChange = ref(locale);
  204. const tableData = ref([]);
  205. const dialogVisible = ref(false);
  206. const showDetail = (id) => {
  207. router.push({
  208. path: "/businessCheck",
  209. query: {
  210. id,
  211. },
  212. });
  213. };
  214. const pageNum = ref(1);
  215. const pageSize = ref(10);
  216. const total = ref(0);
  217. const getStatus = (val) => {
  218. return val * 1 ? "锁定" : "正常";
  219. };
  220. const getDate = (val) => {
  221. return dayjs(val).format("YYYY-MM-DD");
  222. };
  223. const handleSizeChange = (val) => {
  224. pageSize.value = val;
  225. getListData(pageNum.value, pageSize.value);
  226. };
  227. const handleCurrentChange = (val) => {
  228. pageNum.value = val;
  229. getListData(pageNum.value, pageSize.value);
  230. };
  231. const getListData = async (PageNum, PageSize) => {
  232. try {
  233. const res = await businessListApi(PageNum, PageSize, 1, route.query.id || '');
  234. console.log(res, "res");
  235. tableData.value = res.data.list;
  236. total.value = res.data.total * 1;
  237. } catch (error) {
  238. console.log(error, "err");
  239. }
  240. };
  241. const formData = ref({
  242. name: "",
  243. address: "",
  244. code: "",
  245. type: 1,
  246. });
  247. const rules = {
  248. name: [
  249. {
  250. required: true,
  251. message: "Please input name",
  252. trigger: "blur",
  253. },
  254. ],
  255. address: [
  256. {
  257. required: true,
  258. message: "Please input address",
  259. trigger: "blur",
  260. },
  261. ],
  262. code: [
  263. {
  264. required: true,
  265. message: "Please input code",
  266. trigger: "blur",
  267. },
  268. ],
  269. type: [
  270. {
  271. required: true,
  272. message: "Please select access methods",
  273. trigger: "blur",
  274. },
  275. ],
  276. };
  277. const accessMethods = ref([
  278. {
  279. label: "api接入",
  280. value: 1,
  281. },
  282. {
  283. label: "私有化接入",
  284. value: 2,
  285. },
  286. ]);
  287. const handleClose = () => {
  288. dialogVisible.value = false;
  289. accountDialogVisible.value = false;
  290. modelDialogVisible.value = false;
  291. setTimeout(() => {
  292. formData.value = {
  293. name: "",
  294. address: "",
  295. code: "",
  296. type: 1,
  297. };
  298. }, 500);
  299. };
  300. const ruleForm = ref();
  301. const addNew = async (refForm) => {
  302. if (!refForm) return;
  303. await refForm.validate(async (valid, fields) => {
  304. if (valid) {
  305. const data = formData.value;
  306. try {
  307. const res = await addBusinessApi(data);
  308. console.log(res, "res");
  309. if (res.code == 200) {
  310. ElMessage.success("添加成功!");
  311. dialogVisible.value = false;
  312. }
  313. getListData(1, 10);
  314. pageNum.value = 1;
  315. pageSize.value = 10;
  316. } catch (error) {
  317. console.log(error, "err");
  318. ElMessage.error(error.message);
  319. }
  320. } else {
  321. ElMessage.error("请完善信息!");
  322. }
  323. });
  324. };
  325. // 设置时长
  326. const setTime = (id) => {
  327. ElMessageBox.prompt('请输入时长(秒)', '设置时长', {
  328. confirmButtonText: 'OK',
  329. cancelButtonText: 'Cancel',
  330. inputPattern: /^[0-9]*$/,
  331. inputErrorMessage: '请输入数字',
  332. beforeClose: async (action, instance, done) => {
  333. if (action == "confirm") {//点击确认请求接口
  334. let res = await setRemainingTimes({ id: id, times: instance.inputValue })
  335. if (res.code === 200) {
  336. // 通过监测关闭
  337. ElMessage.success('设置成功')
  338. done();
  339. } else {
  340. ElMessage.error(res.message)
  341. }
  342. } else {
  343. //点击取消关闭
  344. done();
  345. }
  346. }
  347. })
  348. }
  349. // 登录账号
  350. const accountDialogVisible = ref(false);
  351. const mallUserInfoFlag = ref(false);
  352. const loginAccount = (item) => {
  353. if (item.mallUserInfo) {
  354. getMallUserInfo(item.id).then(res => {
  355. if (res.code === 200) {
  356. formData2.value = {
  357. serviceId: item.id,
  358. username: res.data.username,
  359. name: res.data.name,
  360. password: '',
  361. phone: res.data.phone
  362. };
  363. }
  364. })
  365. } else {
  366. formData2.value.serviceId = item.id
  367. }
  368. mallUserInfoFlag.value = item.mallUserInfo ? true : false
  369. accountDialogVisible.value = true
  370. }
  371. // 登录账号
  372. const formData2 = ref({
  373. serviceId: "",
  374. username: "",
  375. name: "",
  376. password: "",
  377. phone: "",
  378. });
  379. const rules2 = {
  380. name: [
  381. {
  382. required: true,
  383. message: "Please input name",
  384. trigger: "blur",
  385. },
  386. ],
  387. username: [
  388. {
  389. required: true,
  390. message: "Please input username",
  391. trigger: "blur",
  392. },
  393. ],
  394. password: [
  395. {
  396. required: true,
  397. message: "Please input password",
  398. trigger: "blur",
  399. },
  400. ],
  401. phone: [
  402. {
  403. required: true,
  404. message: "Please input phone",
  405. trigger: "blur",
  406. },
  407. ],
  408. };
  409. const ruleForm2 = ref();
  410. const addAccount = async (refForm) => {
  411. if (!refForm) return;
  412. await refForm.validate(async (valid, fields) => {
  413. if (valid) {
  414. const data = formData2.value;
  415. try {
  416. const res = await saveMallUserInfo(data);
  417. if (res.code == 200) {
  418. ElMessage.success("添加成功!");
  419. accountDialogVisible.value = false;
  420. }
  421. getListData(1, 10);
  422. pageNum.value = 1;
  423. pageSize.value = 10;
  424. } catch (error) {
  425. console.log(error, "err");
  426. ElMessage.error(error);
  427. }
  428. } else {
  429. ElMessage.error("请完善信息!");
  430. }
  431. });
  432. };
  433. // 关联模版
  434. const modelDialogVisible = ref(false);
  435. const serviceId = ref('')
  436. function associationTemp(id) {
  437. modelDialogVisible.value = true
  438. serviceId.value = id
  439. }
  440. onMounted(() => {
  441. getListData(1, 10);
  442. });
  443. </script>
  444. <style lang="scss" scoped>
  445. .page {
  446. height: calc(100vh - 80px);
  447. // height: calc(100vh - 80px);
  448. background-color: #ffffff;
  449. border-radius: 30px 0 0 0;
  450. overflow: hidden;
  451. padding: 10vh;
  452. .addbtn {
  453. margin-bottom: 2vh;
  454. }
  455. .formData {
  456. padding: 5vh 3vh;
  457. }
  458. .pagination {
  459. position: fixed;
  460. left: 55%;
  461. bottom: 8vh;
  462. transform: translateX(-50%);
  463. border-radius: 5px;
  464. padding: 10px 20px;
  465. z-index: 99;
  466. transition: all 0.3s;
  467. cursor: pointer;
  468. &:hover {
  469. background-color: #b8b8b873;
  470. }
  471. }
  472. }
  473. </style>