@arkxos/arkos-system 0.1.0

package/src/views/codeless/subsystem.vue

@@ -0,0 +1,309 @@
+<template>
+  <div class="page-container">
+    <ac-table
+      ref="dataTable"
+      pkName="id"
+      :filters="filters"
+      :filterFields="filterFields"
+      :columns="columns"
+      @handleTableOperator="handleTableOperator"
+      @handleCellOperator="handleCellOperator"
+    ></ac-table>
+  </div>
+
+  <!--新增编辑界面-->
+  <el-dialog
+    :title="dialogTitle"
+    width="600px"
+    v-model="dialogVisible"
+    :close-on-click-modal="false"
+    destroy-on-close
+    draggable
+    fullscreen
+  >
+    <div
+      class="dialog-box"
+      v-loading="dialogLoading"
+      element-loading-text="数据加载中..."
+    >
+      <el-form
+        ref="dataForm"
+        label-width="120px"
+        label-position="right"
+        :model="formData"
+        :rules="rules"
+        :disabled="!dialogEdit"
+        :hide-required-asterisk="!dialogEdit"
+      >
+        <el-row>
+          <el-col :span="8">
+            <el-form-item label="名称" prop="name">
+              <el-input v-model="formData.name" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="4">
+            <el-form-item label="默认显示" prop="defaultShow">
+              <ac-dict-switch v-model="formData.defaultShow" dictCode="dictYesNo" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="4">
+            <el-form-item label="显示选项卡" prop="showMenuTab">
+              <ac-dict-switch v-model="formData.showMenuTab" dictCode="dictYesNo" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="4">
+            <el-form-item label="是否有效" prop="valid">
+              <ac-dict-switch v-model="formData.valid" dictCode="dictYesNo" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="8">
+            <el-form-item label="菜单宽度" prop="menuWidth">
+              <ac-number v-model="formData.menuWidth" :point="0"></ac-number>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="徽标数脚本" prop="badgeScriptId">
+              <template #label>
+                <span style="margin-right: 5px">徽标数脚本</span>
+                <el-tooltip>
+                  <template #content>
+                    <div>返回Map&lt;String, Integer>的key, value形式数据：</div>
+                    <div>key为【totalNumber】时value为菜单选择界面显示的徽标数</div>
+                    <div>key为【菜单编码】时value为子系统菜单列表显示的徽标数</div>
+                  </template>
+                  <ac-icon iconId="018dca8ec9890493be26" />
+                </el-tooltip>
+              </template>
+              <ac-tree
+                v-model="formData.badgeScriptId"
+                data-url="/system/scriptGroovy/queryTree"
+                type-select="script"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="排序" prop="ordinal">
+              <ac-number v-model="formData.ordinal" :point="0" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="22">
+            <el-form-item label="首页显示图标" prop="iconId">
+              <ac-image v-model="formData.iconId" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="11">
+            <el-form-item label="头部内容类型" prop="pageTopType">
+              <ac-buttons v-model="formData.pageTopType" options='文字,图片' />
+            </el-form-item>
+          </el-col>
+          <el-col :span="11" v-if="formData.pageTopType === '文字'">
+            <el-form-item label="头部显示文字" prop="pageTopContent">
+              <el-input v-model="formData.pageTopContent" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row v-if="formData.pageTopType === '图片'">
+          <el-col :span="22">
+            <el-form-item label="头部显示图片" prop="pageTopImageId">
+              <ac-image v-model="formData.pageTopImageId" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="22">
+            <el-form-item label="子系统样式" prop="extendsCss" style="height: 350px">
+              <ac-code v-model="formData.extendsCss" mode="css"></ac-code>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row v-if="!dialogEdit">
+          <el-col :span="22">
+            <el-form-item label="更新时间" prop="updateTime">
+              <ac-datetime v-model="formData.updateTime" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row v-if="!dialogEdit">
+          <el-col :span="22">
+            <el-form-item label="创建时间" prop="createTime">
+              <ac-datetime v-model="formData.createTime" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+    </div>
+    <template #footer>
+      <el-button
+        size="default"
+        type="info"
+        @click="dialogVisible=false"
+      >{{dialogEdit ? '取消' : '关闭'}}</el-button>
+      <el-button
+        v-if="dialogEdit"
+        size="default"
+        type="primary"
+        :loading="editLoading"
+        @click="submitForm"
+      >提交
+      </el-button>
+    </template>
+  </el-dialog>
+
+  <el-dialog
+    v-model="fileVisible"
+    width="500px"
+    title="导入"
+    :append-to-body="true"
+    :close-on-click-modal="false"
+    destroy-on-close
+    draggable
+  >
+    <el-upload
+      action=""
+      :http-request="handleImport"
+      :show-file-list=false
+      accept=".dat"
+    >
+      <el-button :loading="fileLoading" type="primary">数据导入</el-button>
+      <template #tip><div class="el-upload__tip">只能上传.dat文件</div></template>
+    </el-upload>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button
+          size="default"
+          @click="fileVisible=false"
+          type="info"
+        >关闭</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { nextTick, ref } from 'vue';
+import api from '@/http/api';
+import { ElMessage, ElMessageBox } from 'element-plus';
+
+const filters = ref({
+  name: ''
+});
+const filterFields = ref([
+  { prop: 'name', label: '名称' }
+]);
+
+const columns = ref([
+  { prop: 'name', label: '名称', minWidth: 160, click: true },
+  { prop: 'type', label: '类型', minWidth: 80, type: 'dict-radio', dictCode: 'dictSubsystemType' },
+  { prop: 'defaultShow', label: '默认显示', minWidth: 90, type: 'dict-radio', dictCode: 'dictYesNo', sortable: false },
+  { prop: 'showMenuTab', label: '显示选项卡', minWidth: 90, type: 'dict-radio', dictCode: 'dictYesNo', sortable: false },
+  { prop: 'iconId', label: '首页显示图标', minWidth: 110, type: 'image', sortable: false },
+  { prop: 'pageTopType', label: '头部显示类型', minWidth: 100, sortable: false },
+  { prop: 'pageTopContent', label: '头部显示文字', minWidth: 100, sortable: false },
+  { prop: 'pageTopImageId', label: '头部显示图片', minWidth: 110, type: 'image', sortable: false },
+  { prop: 'valid', label: '是否有效', minWidth: 80, type: 'dict-radio', dictCode: 'dictYesNo', sortable: false },
+  { prop: 'ordinal', label: '排序', minWidth: 80, type: 'number' },
+  { prop: 'updateTime', label: '更新时间', width: 160, onlyShow: true, type: 'datetime' },
+]);
+
+const rules = ref({
+  name: [
+    { required: true, message: '请输入名称', trigger: ['change', 'blur'] },
+    { max: 100, message: '长度必须小于等于 100 个字符！', trigger: ['change', 'blur'] }
+  ],
+  defaultShow: [
+    { required: true, message: '请选择默认显示', trigger: ['change', 'blur'] },
+  ],
+  ordinal: [
+    { required: true, message: '请输入排序', trigger: ['change', 'blur'] }
+  ],
+});
+
+const dataTable = ref();
+const dialogTitle = ref('');
+const dialogEdit = ref(false);
+const dialogVisible = ref(false);
+const dialogLoading = ref(false);
+const editLoading = ref(false);
+const dataForm = ref();
+const formData = ref({});
+const defaultFormData = ref({
+  type: '3',
+  defaultShow: '0',
+  showMenuTab: '0',
+  pageTopType: '文字',
+  ordinal: 10,
+  valid: '1'
+});
+
+const fileVisible = ref(false);
+const fileLoading = ref(false);
+
+const handleImport = (file) => {
+  api.uploadFile('/system/subsystem/importData', { file: file.file }).then((res) => {
+    ElMessage.success(res.message);
+    fileVisible.value = false;
+    dataTable.value.findPage();
+  });
+};
+
+const handleCellOperator = (property, value, row) => {
+  formData.value = Object.assign({}, row);
+  dialogVisible.value = true;
+  dialogEdit.value = false;
+  dialogTitle.value = '查看';
+  editLoading.value = false;
+
+  nextTick(() => {
+    dataForm.value && dataForm.value.clearValidate();
+  });
+};
+
+const handleTableOperator = (button, row) => {
+  dialogTitle.value = button.name;
+  dialogEdit.value = true;
+  editLoading.value = false;
+  formData.value = Object.assign({}, defaultFormData.value);
+
+  if (button.buttonType === 'edit') {
+    formData.value = Object.assign({}, row, { button: button });
+    dialogVisible.value = true
+  } else if (button.buttonType === 'add') {
+    formData.value = Object.assign({},
+      defaultFormData.value,
+      { menuWidth: 200, button: button });
+    dialogVisible.value = true
+  } else if (button.buttonType === 'exportData') {
+    const data = row.map(item => item.id);
+    api.downloadFile('/system/subsystem/exportData', { ids: data }).then(res => api.saveFileLocal(res));
+  } else if (button.buttonType === 'importData') {
+    fileVisible.value = true;
+  } else {
+    formData.value = Object.assign({ button: button }, defaultFormData.value);
+    dialogVisible.value = true
+  }
+};
+
+const submitForm = () => {
+  dataForm.value && dataForm.value.validate((valid) => {
+    if (valid) {
+      ElMessageBox.confirm('请确认是否提交？', '提示', { type: 'info' }).then(() => {
+        editLoading.value = true;
+        api.post(formData.value.button.dataDestUrl, formData.value).then(res => {
+          ElMessage.success(res.message);
+          dialogVisible.value = false;
+          editLoading.value = false;
+          dataTable.value.findPage();
+        }).catch(() => {
+          editLoading.value = false;
+        });
+      }).catch(() => {});
+    }
+  });
+};
+</script>