monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by xwx
Commit 88cc7fa4ec21e6222d48c272d2dce58d430800b9 1 parent 7b94405f

系统配置-【无】-页面

Inline Side-by-side
Showing 6 changed files with 317 additions and 0 deletions
  1 +<title>系统配置</title>
  2 +<iframe class="layadmin-iframe" src="/vue3/index.html#/vue3/systemConf" style="height: 99%!important;"/>
  3 +
@@ -40,6 +40,10 @@ @@ -40,6 +40,10 @@
40 width: 93px; 40 width: 93px;
41 } 41 }
42 42
  43 +.upload-demo-systemConf {
  44 + width: 280px;
  45 +}
  46 +
43 .logo-img { 47 .logo-img {
44 width: 400px; 48 width: 400px;
45 padding: 10px; 49 padding: 10px;
@@ -30,6 +30,8 @@ Promise.all([ @@ -30,6 +30,8 @@ Promise.all([
30 .component('cm-res-type-tree-view', Vue.defineAsyncComponent(() => myImport('components/common/restypetree/index'))) 30 .component('cm-res-type-tree-view', Vue.defineAsyncComponent(() => myImport('components/common/restypetree/index')))
31 // 资源类型树 31 // 资源类型树
32 .component('cm-table-page', Vue.defineAsyncComponent(() => myImport('components/common/table-page/index'))) 32 .component('cm-table-page', Vue.defineAsyncComponent(() => myImport('components/common/table-page/index')))
  33 + // 表格
  34 + .component('cm-table-page-column', Vue.defineAsyncComponent(() => myImport('components/common/table-page-column/index')))
33 // 弹框 35 // 弹框
34 .component('cm-dialog', Vue.defineAsyncComponent(() => myImport('components/common/dialog/index'))) 36 .component('cm-dialog', Vue.defineAsyncComponent(() => myImport('components/common/dialog/index')))
35 // 用户授权 37 // 用户授权
  1 +<div class="container" :style="{'height':height+'px','max-height':height+'px','padding':'10px 0 10px 10px','background':'#fff','box-sizing':'border-box'}">
  2 + <div class="cm-card" :style="{'min-height':height+'px','max-height':height+'px','height':'100%','padding-top':'3px'}">
  3 + <el-row>
  4 + <el-col :span="4">
  5 + <div class="search-input flex-div-start">
  6 + <el-tooltip placement="bottom-start">
  7 + <template #content>名称<br/>编码</template>
  8 + <el-input :size="$global.elementConfig.size.input" v-model="search.keyword" placeholder="请输入关键字(回车搜索)" class="fault-book-input-text" />
  9 + </el-tooltip>
  10 + <el-button :size="$global.elementConfig.size.button" type="primary" @click="getDataList()">查询</el-button>
  11 + </div>
  12 + </el-col>
  13 + <el-col :span="1">
  14 + <el-button :size="$global.elementConfig.size.button" @click="openAddFile()">新增</el-button>
  15 + </el-col>
  16 + </el-row>
  17 + <div class="search-table"style="margin-top: 6px">
  18 + <cm-table-page :columns="columns" :dataList="tableDataList" :height="(height - 130)"
  19 + :loading="false" :pageSize="pageSize" :showBorder="true"
  20 + :showIndex="true" :showPage="true" :showSelection="true"
  21 + :showTools="true" :total="count" @loaddata="loadTableDataList">
  22 + <template #default="{row,prop,column}">
  23 + <div v-if="prop == 'type'">
  24 + <div v-if="row.type == 'img'">
  25 + <el-tag>图片</el-tag>
  26 + </div>
  27 + <div v-if="row.type == 'file'">
  28 + <el-tag>文件</el-tag>
  29 + </div>
  30 + </div>
  31 + <div v-if="prop == 'img'">
  32 + <div v-if="row.type == 'img'">
  33 + <el-image style="width: 100px; height: 100px" :src="domainName+row.code" />
  34 + </div>
  35 + </div>
  36 + </template>
  37 + <template #tools="{scope}">
  38 + <div class="list-handle">
  39 + <span class="icon-bg">
  40 + <i @click="download(scope.row)" class="el-icon-download" title="下载"></i>
  41 + </span>
  42 + <span class="icon-bg">
  43 + <i @click="handleUpdate(scope.row)" class="el-icon-edit-outline" title="修改"></i>
  44 + </span>
  45 + <span class="icon-bg">
  46 + <i @click="handleDelete(scope.row)" class="el-icon-delete" title="删除"></i>
  47 + </span>
  48 + </div>
  49 + </template>
  50 + </cm-table-page>
  51 + </div>
  52 + </div>
  53 +</div>
  54 +
  55 +<!--新增编辑弹框-->
  56 +<cm-dialog :showDialogVisible="cacheVisible" :showFooter="false" :title="titleName" @hidedialog="cancelBtn"
  57 + width="400px">
  58 + <template v-slot>
  59 + <el-form
  60 + :model="fileFrom"
  61 + :rules="docRulesForm"
  62 + label-position="right"
  63 + label-width="100px"
  64 + label-width="120px"
  65 + ref="ruleForm">
  66 + <el-form-item label="名称" prop="name">
  67 + <el-input :size="$global.elementConfig.size.input" clearable v-model="fileFrom.name"></el-input>
  68 + </el-form-item>
  69 + <el-form-item label="编码" prop="code">
  70 + <el-input :size="$global.elementConfig.size.input" clearable v-model="fileFrom.code"></el-input>
  71 + </el-form-item>
  72 + <el-form-item label="文件" prop="img">
  73 + <el-upload
  74 + :auto-upload="true"
  75 + :before-upload="beforeAvatarUpload"
  76 + :http-request="getFile"
  77 + :multiple="false"
  78 + :show-file-list="false">
  79 + <el-input :size="$global.elementConfig.size.input" placeholder="请上传文件" v-model="fileFrom.fileName" class="upload-demo-systemConf"></el-input>
  80 + </el-upload>
  81 + </el-form-item>
  82 + <el-form-item>
  83 + <el-button :size="$global.elementConfig.size.button" @click="addFrom()" type="primary">保存
  84 + </el-button>
  85 + <el-button :size="$global.elementConfig.size.button" @click="cancelBtn">取消</el-button>
  86 + </el-form-item>
  87 + </el-form>
  88 + </template>
  89 +</cm-dialog>
  90 +
  91 +
  1 +export default {
  2 + name: 'systemConf',
  3 + template: '',
  4 + components: {},
  5 + data() {
  6 + return {
  7 + radio: '0',
  8 + docRulesForm: {
  9 + name: [{
  10 + required: true,
  11 + message: '请填写名称！',
  12 + trigger: 'blur',
  13 + }],
  14 + code: [{
  15 + required: true,
  16 + message: '请填写编码！',
  17 + trigger: 'blur',
  18 + }],
  19 + }
  20 + }
  21 + },
  22 + props: {},
  23 + setup: function (props, {attrs, slots, emit}) {
  24 + const {proxy} = Vue.getCurrentInstance();
  25 + let height = Vue.ref(window.innerHeight);
  26 + let search = Vue.ref({
  27 + keyword: '',
  28 + type: '',
  29 + groupId:'',
  30 + page: 1,
  31 + limit: 10,
  32 + });
  33 + let count = Vue.ref(0);
  34 + let columns = Vue.ref([
  35 + {
  36 + prop: 'name',
  37 + label: '名称',
  38 + sortable: true,
  39 + align: 'center'
  40 + },
  41 + {
  42 + prop: 'img',
  43 + label: '图片',
  44 + sortable: true,
  45 + align: 'center',
  46 + width: '300'
  47 + },
  48 + {
  49 + prop: 'type',
  50 + label: '类型',
  51 + sortable: true,
  52 + align: 'center',
  53 + width: '200'
  54 + },
  55 + {
  56 + prop: 'createTime',
  57 + label: '创建时间',
  58 + sortable: true,
  59 + align: 'center',
  60 + width: '230'
  61 + }
  62 + ])
  63 + let activeName = Vue.ref('default');
  64 + //刷新页面
  65 + let hasRefresh = Vue.ref(true);
  66 + //ip地址
  67 + let domainName = Vue.ref(sessionStorage.getItem('domainName') + "/api-web/file/down?code=");
  68 + let fileFrom = Vue.ref({
  69 + id: '',
  70 + pid: '',
  71 + name: '',
  72 + fileName: '',
  73 + code: '',
  74 + groupId: '',
  75 + type: '',
  76 + file: '',
  77 + createTime: '',
  78 + uploadFile:''
  79 + });
  80 + //上传完后的图片预览
  81 + let imageUrl = Vue.ref('');
  82 + let tableDataList = Vue.ref([]);
  83 + let isAdd = Vue.ref(true);
  84 + let beforeAvatarUpload = (file) => {
  85 + const isJPG = file.type.indexOf('image/') != -1
  86 + if (!isJPG) {
  87 + fileFrom.value.type ='file';
  88 + }else {
  89 + fileFrom.value.type ='img';
  90 + }
  91 + return isJPG
  92 + }
  93 + //获取配置列表
  94 + let getDataList = () => {
  95 + let params = {
  96 + page: search.value.page,
  97 + limit: search.value.limit,
  98 + groupId:search.value.groupId,
  99 + type: search.value.type,
  100 + keywords: search.value.keyword
  101 + }
  102 + proxy.$http.get(`/api-web/file/page`, params, function (res) {
  103 + if (res && res.data) {
  104 + count.value = res.count;
  105 + tableDataList.value = res.data;
  106 + } else {
  107 + count.value = 0;
  108 + tableDataList.value = '暂无数据';
  109 + }
  110 + });
  111 + }
  112 + //删除
  113 + let handleDelete = (row) => {
  114 + let param = {
  115 + idList: row.id
  116 + }
  117 + proxy.$http.get(`/api-web/file/delete`, param, function (res) {
  118 + if (res && res.success == true) {
  119 + proxy.$global.showMsg('删除成功','success');
  120 + getDataList();
  121 + }else {
  122 + proxy.$global.showMsg('删除失败','warning');
  123 + }
  124 + })
  125 + }
  126 + // 下载
  127 + let download = (row) => {
  128 + let params={
  129 + code:row.code
  130 + }
  131 + proxy.$http.downloadFile('/api-web/file/down',params);
  132 + }
  133 + let getFile = (param) => {
  134 + fileFrom.value.uploadFile = param.file;
  135 + fileFrom.value.fileName = param.file.name;
  136 + }
  137 +
  138 + let cacheVisible = Vue.ref(false);
  139 + let openAddFile = () => {
  140 + cacheVisible.value = true;
  141 + }
  142 + //保存
  143 + let addFile = () => {
  144 +
  145 + }
  146 + //关闭弹框
  147 + let cancelBtn = () => {
  148 + cacheVisible.value = false;
  149 + }
  150 + //修改
  151 + let handleUpdate = (row) => {
  152 + cacheVisible.value = true;
  153 + fileFrom.value = row;
  154 + isAdd.value = false;
  155 + }
  156 + let addFrom = () => {
  157 + let params = fileFrom.value;
  158 + debugger
  159 + if (isAdd.value){
  160 + proxy.$http.uploadFile("/api-web/file/add", params, function (res) {
  161 + hasRefresh.value = false;
  162 + if (res && res.success) {
  163 + proxy.$global.showMsg("新增成功！");
  164 + cacheVisible.value = false;
  165 + getDataList();
  166 + }
  167 +
  168 + })
  169 + }else {
  170 + proxy.$http.uploadFile("/api-web/file/update", params, function (res) {
  171 + hasRefresh.value = false;
  172 + if (res && res.success) {
  173 + proxy.$global.showMsg("修改成功！");
  174 + cacheVisible.value = false;
  175 + getDataList();
  176 + }
  177 +
  178 + })
  179 + }
  180 +
  181 + }
  182 + // 挂载完
  183 + Vue.onMounted(() => {
  184 + getDataList();
  185 + })
  186 + return {
  187 + hasRefresh,
  188 + height,
  189 + activeName,
  190 + beforeAvatarUpload,
  191 + imageUrl,
  192 + getFile,
  193 + domainName,
  194 + tableDataList,
  195 + getDataList,
  196 + search,
  197 + count,
  198 + columns,
  199 + handleDelete,
  200 + download,
  201 + fileFrom,
  202 + cacheVisible,
  203 + openAddFile,
  204 + addFile,
  205 + cancelBtn,
  206 + addFrom,
  207 + handleUpdate,
  208 + isAdd
  209 + }
  210 + }
  211 +}
@@ -238,6 +238,12 @@ const routes = [{ @@ -238,6 +238,12 @@ const routes = [{
238 name: 'logoConfig', 238 name: 'logoConfig',
239 component: () => myImport('views/logoConfig/index') 239 component: () => myImport('views/logoConfig/index')
240 }, 240 },
  241 + //系统配置
  242 + {
  243 + path: '/vue3/systemConf',
  244 + name: 'systemConf',
  245 + component: () => myImport('views/systemConf/index')
  246 + },
241 //忙时配置 247 //忙时配置
242 { 248 {
243 path: '/vue3/busyConfig', 249 path: '/vue3/busyConfig',