|
|
@@ -1,261 +0,0 @@
|
|
|
-<template>
|
|
|
- <el-container class="content-height-fit">
|
|
|
- <el-container class="resize-fit-container">
|
|
|
- <div class="app-container">
|
|
|
- <div class="filter-container blue-top-border">
|
|
|
- <el-input
|
|
|
- v-model="listQuery.deviceNo"
|
|
|
- placeholder="客户端ID"
|
|
|
- class="filter-item"
|
|
|
- clearable
|
|
|
- @change="getList"
|
|
|
- />
|
|
|
- <el-button
|
|
|
- v-waves
|
|
|
- class="filter-item"
|
|
|
- type="primary"
|
|
|
- icon="el-icon-search"
|
|
|
- size="small"
|
|
|
- @click="handleFilter"
|
|
|
- >查询</el-button>
|
|
|
- <el-button
|
|
|
- v-waves
|
|
|
- class="filter-item"
|
|
|
- type="primary"
|
|
|
- icon="el-icon-edit"
|
|
|
- size="small"
|
|
|
- @click="handleCreate"
|
|
|
- >新增</el-button>
|
|
|
- <el-button
|
|
|
- v-waves
|
|
|
- class="filter-item"
|
|
|
- type="primary"
|
|
|
- icon="el-icon-edit"
|
|
|
- size="small"
|
|
|
- >下载加密文件</el-button>
|
|
|
- </div>
|
|
|
- <div class="content-container">
|
|
|
- <el-table
|
|
|
- v-loading="listLoading"
|
|
|
- row-key="id"
|
|
|
- :data="list"
|
|
|
- border
|
|
|
- fit
|
|
|
- highlight-current-row
|
|
|
- style="width: 100%"
|
|
|
- height="calc(100vh - 276px)"
|
|
|
- >
|
|
|
- <el-table-column label="序号" type="index" width="50" align="center" />
|
|
|
- <el-table-column label="客户端key" prop="deviceNo" :show-overflow-tooltip="true" align="center" />
|
|
|
- <el-table-column label="客户端Secret" prop="deviceName" :show-overflow-tooltip="true" align="center" />
|
|
|
- <el-table-column label="过期时间" prop="categoryName" :show-overflow-tooltip="true" align="center" />
|
|
|
- <el-table-column
|
|
|
- label="操作"
|
|
|
- align="center"
|
|
|
- width="110"
|
|
|
- class-name="small-padding fixed-width"
|
|
|
- >
|
|
|
- <template slot-scope="{ row }">
|
|
|
- <el-button
|
|
|
- type="primary"
|
|
|
- size="mini"
|
|
|
- @click="handleUpdate(row)"
|
|
|
- >修改</el-button>
|
|
|
- <el-button
|
|
|
- size="mini"
|
|
|
- type="danger"
|
|
|
- @click="handleDelete(row)"
|
|
|
- >删除</el-button>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
- </div>
|
|
|
- <el-dialog
|
|
|
- title="创建客户端凭证"
|
|
|
- :close-on-click-modal="false"
|
|
|
- :visible.sync="dialogFormVisible"
|
|
|
- >
|
|
|
- <el-form
|
|
|
- ref="dataForm"
|
|
|
- v-loading="formLoading"
|
|
|
- :rules="rules"
|
|
|
- :model="entity"
|
|
|
- label-position="right"
|
|
|
- label-width="120px"
|
|
|
- >
|
|
|
- <el-row :gutter="16">
|
|
|
- <el-col :span="12">
|
|
|
- <el-form-item label="客户端key" prop="client_key">
|
|
|
- <el-input v-model="entity.deviceNo" :show-overflow-tooltip="true" />
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- <el-row :gutter="16">
|
|
|
- <el-col :span="12">
|
|
|
- <el-form-item label="客户端Secret" prop="client_secret">
|
|
|
- <el-input v-model="entity.deviceName" :show-overflow-tooltip="true" />
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="12">
|
|
|
- <el-form-item label="过期时间" prop="expires_in">
|
|
|
- <el-select v-model="entity.deviceType" class="w100p">
|
|
|
- <el-option
|
|
|
- v-for="item in deviceTypes"
|
|
|
- :key="item.key"
|
|
|
- :value="item.key"
|
|
|
- :label="item.name"
|
|
|
- />
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </el-form>
|
|
|
- <div slot="footer" class="dialog-footer">
|
|
|
- <el-button
|
|
|
- :disabled="formLoading"
|
|
|
- @click="dialogFormVisible = false"
|
|
|
- >取消</el-button>
|
|
|
- <el-button
|
|
|
- :disabled="formLoading"
|
|
|
- type="primary"
|
|
|
- @click="dialogStatus === 'create' ? createData() : updateData()"
|
|
|
- >确认</el-button>
|
|
|
- </div>
|
|
|
- </el-dialog>
|
|
|
- </div>
|
|
|
- </el-container>
|
|
|
- </el-container>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-import * as clientSettingApi from '@/api/client-setting'
|
|
|
-
|
|
|
-import waves from '@/directive/waves' // waves directive
|
|
|
-
|
|
|
-export default {
|
|
|
- name: 'DeviceMng',
|
|
|
- directives: { waves },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- list: [],
|
|
|
- entity: {},
|
|
|
- total: 0,
|
|
|
- listLoading: false,
|
|
|
- listQuery: {
|
|
|
- skipCount: 0,
|
|
|
- maxResultCount: 20
|
|
|
- },
|
|
|
- dialogFormVisible: false,
|
|
|
- formLoading: false,
|
|
|
- rules: {
|
|
|
- client_key: [
|
|
|
- { required: true, message: '请输入客户端Key', trigger: 'blur' },
|
|
|
- { max: 32, message: '长度必须少于32个字符', trigger: 'blur' }
|
|
|
- ],
|
|
|
- client_secret: [
|
|
|
- { required: true, message: '请输入客户端', trigger: 'blur' },
|
|
|
- { max: 64, message: '长度必须少于64个字符', trigger: 'blur' }
|
|
|
- ],
|
|
|
- expires_in: [
|
|
|
- { required: true, message: '请输入过期时间', trigger: 'blur' }
|
|
|
- ]
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- this.getList()
|
|
|
- },
|
|
|
- methods: {
|
|
|
- // 查询
|
|
|
- handleFilter() {
|
|
|
- this.listQuery.skipCount = 0
|
|
|
- this.getList()
|
|
|
- },
|
|
|
- // // 创建清空
|
|
|
- // resetStation() {
|
|
|
- // this.entity = {
|
|
|
- // id: undefined,
|
|
|
- // projectId: this.listQuery.projectId,
|
|
|
- // sectionId: this.listQuery.sectionId,
|
|
|
- // sectionAreaId: this.listQuery.sectionAreaId,
|
|
|
- // deviceNo: '',
|
|
|
- // deviceName: '',
|
|
|
- // category: undefined,
|
|
|
- // categoryName: '',
|
|
|
- // spec: '',
|
|
|
- // madeFactory: '',
|
|
|
- // driverName: '',
|
|
|
- // telephone: '',
|
|
|
- // deviceType: undefined
|
|
|
- // }
|
|
|
- // },
|
|
|
- // 创建点击事件
|
|
|
- handleCreate() {
|
|
|
- this.resetStation()
|
|
|
- this.dialogStatus = 'create'
|
|
|
- this.dialogFormVisible = true
|
|
|
- this.formLoading = false
|
|
|
- this.entity = {}
|
|
|
- this.$nextTick(() => {
|
|
|
- this.$refs['dataForm'].clearValidate()
|
|
|
- })
|
|
|
- },
|
|
|
- // 创建
|
|
|
- createData() {
|
|
|
- this.$refs['dataForm'].validate(valid => {
|
|
|
- if (valid) {
|
|
|
- this.formLoading = true
|
|
|
- clientSettingApi
|
|
|
- .create(this.entity)
|
|
|
- .then(() => {
|
|
|
- this.getList()
|
|
|
- this.dialogFormVisible = false
|
|
|
- this.$notify({
|
|
|
- title: '成功',
|
|
|
- message: '创建成功',
|
|
|
- type: 'success',
|
|
|
- duration: 2000
|
|
|
- })
|
|
|
- })
|
|
|
- .finally(() => {
|
|
|
- this.formLoading = false
|
|
|
- })
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- // 删除
|
|
|
- handleDelete(row) {
|
|
|
- this.$confirm('此操作将删除该项, 是否继续?', '提示', {
|
|
|
- confirmButtonText: '确定',
|
|
|
- cancelButtonText: '取消',
|
|
|
- type: 'warning'
|
|
|
- }).then(() => {
|
|
|
- this.listLoading = true
|
|
|
- clientSettingApi
|
|
|
- .remove(row.id)
|
|
|
- .then(() => {
|
|
|
- this.getList()
|
|
|
- this.$notify({
|
|
|
- title: '成功',
|
|
|
- message: '删除成功',
|
|
|
- type: 'success',
|
|
|
- duration: 2000
|
|
|
- })
|
|
|
- })
|
|
|
- .finally(() => {
|
|
|
- this.listLoading = false
|
|
|
- })
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-</script>
|
|
|
-
|
|
|
-<style scoped>
|
|
|
-.number >>> input{
|
|
|
- text-align: left !important;
|
|
|
-}
|
|
|
-.el-selects >>> .el-input--suffix{
|
|
|
- width: 150px !important;
|
|
|
-}
|
|
|
-</style>
|
yizai