|
|
@@ -0,0 +1,341 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <div class="gva-search-box">
|
|
|
+ <el-form ref="searchForm" :inline="true" :model="searchInfo">
|
|
|
+ <el-form-item>
|
|
|
+ <el-select v-model="searchInfo.searchKey" >
|
|
|
+ <el-option
|
|
|
+ v-for="item in searchOptions"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-input v-model="searchInfo.type_name" placeholder="请输入关键字"/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button size="small" type="primary" icon="search" @click="onSubmit">搜索</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ <div class="gva-table-box">
|
|
|
+ <div class="gva-btn-list">
|
|
|
+ <el-button size="small" icon="refresh" @click="onReset">刷新</el-button>
|
|
|
+ <el-button size="small" type="primary" icon="plus" @click="openDialog('addAccountType')">新增</el-button>
|
|
|
+ <el-popover v-model="deleteVisible" placement="top" width="160">
|
|
|
+ <p>确定要删除吗？</p>
|
|
|
+ <div style="text-align: right; margin-top: 8px;">
|
|
|
+ <el-button size="small" type="primary" link @click="deleteVisible = false">取消</el-button>
|
|
|
+ <el-button size="small" type="primary" @click="onDelete">确定</el-button>
|
|
|
+ </div>
|
|
|
+ <template #reference>
|
|
|
+ <el-button icon="delete" type="danger" size="small" :disabled="!apis.length" style="margin-left: 10px;" @click="deleteVisible = true">删除</el-button>
|
|
|
+ </template>
|
|
|
+ </el-popover>
|
|
|
+ </div>
|
|
|
+ <el-table :data="tableData" @sort-change="sortChange" @selection-change="handleSelectionChange">
|
|
|
+ <el-table-column
|
|
|
+ type="selection"
|
|
|
+ width="55"
|
|
|
+ />
|
|
|
+ <el-table-column align="left" label="类型名称" min-width="100" prop="type_name" sortable="custom" />
|
|
|
+ <el-table-column align="left" label="类型描述" min-width="150" prop="type_desc" />
|
|
|
+ <el-table-column align="left" label="创建时间" min-width="150" prop="create_time" sortable="custom" />
|
|
|
+ <el-table-column align="left" label="更新时间" min-width="150" prop="update_time" sortable="custom" />
|
|
|
+
|
|
|
+ <el-table-column align="left" fixed="right" label="操作" width="200">
|
|
|
+ <template #default="scope">
|
|
|
+ <el-button
|
|
|
+ icon="edit"
|
|
|
+ size="small"
|
|
|
+ type="primary"
|
|
|
+ link
|
|
|
+ @click="editApiFunc(scope.row)"
|
|
|
+ >编辑</el-button>
|
|
|
+ <el-button
|
|
|
+ icon="delete"
|
|
|
+ size="small"
|
|
|
+ type="primary"
|
|
|
+ link
|
|
|
+ @click="deleteApiFunc(scope.row)"
|
|
|
+ >删除</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <div class="gva-pagination">
|
|
|
+ <el-pagination
|
|
|
+ :current-page="page"
|
|
|
+ :page-size="pageSize"
|
|
|
+ :page-sizes="[10, 30, 50, 100]"
|
|
|
+ :total="total"
|
|
|
+ layout="total, sizes, prev, pager, next, jumper"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ @size-change="handleSizeChange"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <el-dialog v-model="dialogFormVisible" :before-close="closeDialog" :title="dialogTitle">
|
|
|
+ <el-form ref="apiForm" :model="form" :rules="rules" label-width="80px">
|
|
|
+ <el-form-item label="类型名称" prop="type_name" >
|
|
|
+ <el-input v-model="form.type_name" autocomplete="off" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="类型描述" prop="type_desc" >
|
|
|
+ <el-input v-model="form.type_desc" autocomplete="off" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <template #footer>
|
|
|
+ <div class="dialog-footer">
|
|
|
+ <el-button size="small" @click="closeDialog">取 消</el-button>
|
|
|
+ <el-button size="small" type="primary" @click="enterDialog">确 定</el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <script>
|
|
|
+ export default {
|
|
|
+ name: 'Api',
|
|
|
+
|
|
|
+ }
|
|
|
+ </script>
|
|
|
+
|
|
|
+ <script setup>
|
|
|
+ import {
|
|
|
+ getApiById,
|
|
|
+ getApiList,
|
|
|
+ createApi,
|
|
|
+ updateApi,
|
|
|
+ deleteApi,
|
|
|
+ deleteApisByIds
|
|
|
+ } from '@/api/accountType'
|
|
|
+ import { toSQLLine } from '@/utils/stringFun'
|
|
|
+// import warningBar from '@/components/warningBar/warningBar.vue'
|
|
|
+ import { ref } from 'vue'
|
|
|
+ import { ElMessage, ElMessageBox } from 'element-plus'
|
|
|
+// import { isNumber } from 'lodash'
|
|
|
+
|
|
|
+ const methodFiletr = (value) => {
|
|
|
+ const target = searchOptions.value.filter(item => item.value === value)[0]
|
|
|
+ return target && `${target.label}`
|
|
|
+ }
|
|
|
+
|
|
|
+ const apis = ref([])
|
|
|
+ const form = ref({
|
|
|
+ type_name: '',
|
|
|
+ type_desc: ''
|
|
|
+ })
|
|
|
+ const searchOptions = ref([
|
|
|
+ {
|
|
|
+ value: 'type_name',
|
|
|
+ label: '账号类型',
|
|
|
+
|
|
|
+ },
|
|
|
+ ])
|
|
|
+ const type = ref('')
|
|
|
+ const rules = ref({
|
|
|
+ type_name: [{ required: true, message: '请输入类型名称', trigger: 'blur' }],
|
|
|
+ })
|
|
|
+
|
|
|
+ const page = ref(1)
|
|
|
+ const total = ref(0)
|
|
|
+ const pageSize = ref(10)
|
|
|
+ const tableData = ref([])
|
|
|
+ const searchInfo = ref({
|
|
|
+ searchKey:"type_name",
|
|
|
+ })
|
|
|
+
|
|
|
+ const onReset = () => {
|
|
|
+ searchInfo.value = {}
|
|
|
+ getTableData()
|
|
|
+ }
|
|
|
+ // 搜索
|
|
|
+
|
|
|
+ const onSubmit = () => {
|
|
|
+ page.value = 1
|
|
|
+ pageSize.value = 10
|
|
|
+ getTableData()
|
|
|
+ }
|
|
|
+
|
|
|
+ // 分页
|
|
|
+ const handleSizeChange = (val) => {
|
|
|
+ pageSize.value = val
|
|
|
+ getTableData()
|
|
|
+ }
|
|
|
+
|
|
|
+ const handleCurrentChange = (val) => {
|
|
|
+ page.value = val
|
|
|
+ getTableData()
|
|
|
+ }
|
|
|
+
|
|
|
+ // 排序
|
|
|
+ const sortChange = ({ prop, order }) => {
|
|
|
+ if (prop) {
|
|
|
+ if (prop === 'ID') {
|
|
|
+ prop = 'id'
|
|
|
+ }
|
|
|
+ searchInfo.value.orderKey = toSQLLine(prop)
|
|
|
+ searchInfo.value.desc = order === 'descending'
|
|
|
+ }
|
|
|
+ getTableData()
|
|
|
+ }
|
|
|
+
|
|
|
+ // 查询
|
|
|
+ const getTableData = async() => {
|
|
|
+ const table = await getApiList({ page: page.value, pageSize: pageSize.value, ...searchInfo.value})
|
|
|
+ if (table.code === 0) {
|
|
|
+ tableData.value = table.data.list
|
|
|
+ total.value = table.data.total
|
|
|
+ page.value = table.data.page
|
|
|
+ pageSize.value = table.data.pageSize
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ getTableData()
|
|
|
+
|
|
|
+ // 批量操作
|
|
|
+ const handleSelectionChange = (val) => {
|
|
|
+ apis.value = val
|
|
|
+ }
|
|
|
+
|
|
|
+ const deleteVisible = ref(false)
|
|
|
+ const onDelete = async() => {
|
|
|
+ const ids = apis.value.map(item => item.id)
|
|
|
+ const res = await deleteApisByIds({ ids })
|
|
|
+ if (res.code === 0) {
|
|
|
+ ElMessage({
|
|
|
+ type: 'success',
|
|
|
+ message: res.msg
|
|
|
+ })
|
|
|
+ if (tableData.value.length === ids.length && page.value > 1) {
|
|
|
+ page.value--
|
|
|
+ }
|
|
|
+ deleteVisible.value = false
|
|
|
+ getTableData()
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 弹窗相关
|
|
|
+ const apiForm = ref(null)
|
|
|
+ const initForm = () => {
|
|
|
+ apiForm.value.resetFields()
|
|
|
+ form.value = {
|
|
|
+ type_name: '',
|
|
|
+ type_desc: ''
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ const dialogTitle = ref('新增Api')
|
|
|
+ const dialogFormVisible = ref(false)
|
|
|
+ const openDialog = (key) => {
|
|
|
+ switch (key) {
|
|
|
+ case 'addAccountType':
|
|
|
+ dialogTitle.value = '新增'
|
|
|
+ break
|
|
|
+ case 'editAccountType':
|
|
|
+ dialogTitle.value = '编辑'
|
|
|
+ break
|
|
|
+ default:
|
|
|
+ break
|
|
|
+ }
|
|
|
+ type.value = key
|
|
|
+ dialogFormVisible.value = true
|
|
|
+ }
|
|
|
+ const closeDialog = () => {
|
|
|
+ initForm()
|
|
|
+ dialogFormVisible.value = false
|
|
|
+ }
|
|
|
+
|
|
|
+ const editApiFunc = async(row) => {
|
|
|
+ const res = await getApiById({ id: row.id })
|
|
|
+ form.value = res.data.account_type
|
|
|
+ openDialog('editAccountType')
|
|
|
+ }
|
|
|
+
|
|
|
+ const enterDialog = async() => {
|
|
|
+ apiForm.value.validate(async valid => {
|
|
|
+ if (valid) {
|
|
|
+ switch (type.value) {
|
|
|
+ case 'addAccountType':
|
|
|
+ {
|
|
|
+ const res = await createApi(form.value)
|
|
|
+ if (res.code === 0) {
|
|
|
+ ElMessage({
|
|
|
+ type: 'success',
|
|
|
+ message: '添加成功',
|
|
|
+ showClose: true
|
|
|
+ })
|
|
|
+ }
|
|
|
+ getTableData()
|
|
|
+ closeDialog()
|
|
|
+ }
|
|
|
+
|
|
|
+ break
|
|
|
+ case 'editAccountType':
|
|
|
+ {
|
|
|
+ const res = await updateApi(form.value)
|
|
|
+ if (res.code === 0) {
|
|
|
+ ElMessage({
|
|
|
+ type: 'success',
|
|
|
+ message: '编辑成功',
|
|
|
+ showClose: true
|
|
|
+ })
|
|
|
+ }
|
|
|
+ getTableData()
|
|
|
+ closeDialog()
|
|
|
+ }
|
|
|
+ break
|
|
|
+ default:
|
|
|
+ // eslint-disable-next-line no-lone-blocks
|
|
|
+ {
|
|
|
+ ElMessage({
|
|
|
+ type: 'error',
|
|
|
+ message: '未知操作',
|
|
|
+ showClose: true
|
|
|
+ })
|
|
|
+ }
|
|
|
+ break
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ const deleteApiFunc = async(row) => {
|
|
|
+ ElMessageBox.confirm('此操作将永久删除此账号类型, 是否继续?', '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning'
|
|
|
+ })
|
|
|
+ .then(async() => {
|
|
|
+ const res = await deleteApi(row)
|
|
|
+ if (res.code === 0) {
|
|
|
+ ElMessage({
|
|
|
+ type: 'success',
|
|
|
+ message: '删除成功!'
|
|
|
+ })
|
|
|
+ if (tableData.value.length === 1 && page.value > 1) {
|
|
|
+ page.value--
|
|
|
+ }
|
|
|
+ getTableData()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ </script>
|
|
|
+
|
|
|
+ <style scoped lang="scss">
|
|
|
+ .button-box {
|
|
|
+ padding: 10px 20px;
|
|
|
+ .el-button {
|
|
|
+ float: right;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .warning {
|
|
|
+ color: #dc143c;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+
|
maker