@arkxos/arkos-system 0.1.0

package/src/views/icon/icon.vue

@@ -0,0 +1,242 @@
+<template>
+  <div class="page-container">
+    <el-row>
+      <el-col :span="8"></el-col>
+      <el-col :span="8">
+        <el-input v-model="searchValue" placeholder="搜索" clearable />
+      </el-col>
+      <el-col :span="8" class="upload-button">
+        <el-upload
+          accept="image/*"
+          :multiple=true
+          :http-request="handleUpload"
+          :file-list="iconList"
+          :show-file-list=false
+          :before-upload="handleBeforeUpload"
+        >
+          <el-button type="primary">
+            <ac-icon iconId="018dc9c3efd2131ecc10" />
+            <span style="margin-left: 5px;">上传图标</span>
+          </el-button>
+        </el-upload>
+        <el-upload
+          style="margin: 0 10px;"
+          action=""
+          :http-request="handleImport"
+          :show-file-list="false"
+          accept=".dat"
+        >
+          <el-button type="success">
+            <ac-icon iconId="018ece4f70fcf0627f81" />
+            <span style="margin-left: 5px;">导入</span>
+          </el-button>
+        </el-upload>
+        <el-button type="primary" @click="handleExport">
+          <ac-icon iconId="018ece4f749ec5911772" />
+          <span style="margin-left: 5px;">导出</span>
+        </el-button>
+      </el-col>
+    </el-row>
+    <div class="icon">
+      <div
+        v-for="(icon, index) in iconList.filter(item => searchValue ? item.name.indexOf(searchValue) >= 0 : true)"
+        :key="index"
+        class="icon-item"
+        @click="showIcon(icon)"
+      >
+        <div class="icon-item-icon">
+          <ac-icon :icon="icon" size="30" style="width: 30px;height: 30px;"/>
+        </div>
+        <div class="icon-item-text">
+          <div class="icon-item-name">{{icon.name}}</div>
+          <div class="icon-item-code" v-if="icon.status === 1">上传中...</div>
+        </div>
+        <div class="icon-item-button" v-if="icon.status !== 1">
+          <span class="icon-item-copy" @click.stop="copyIcon(icon)">复制</span>
+          <span class="icon-item-delete" @click.stop="deleteIcon(icon)" v-if="icon.builtin !== '1'">删除</span>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <el-dialog
+    v-model="dialogVisible"
+    title="图标查看"
+    style="min-height: 500px"
+    destroy-on-close
+    draggable
+    append-to-body
+  >
+    <div class="dialog-icon">
+      <ac-icon color="#999" :size="dialogIcon.type === 'svg' ? '50' : 'auto'" :icon="dialogIcon" />
+    </div>
+  </el-dialog>
+</template>
+
+<script setup>
+import { onMounted, ref } from 'vue';
+import api from '@/http/api';
+import clipboard from 'clipboard';
+import { ElMessage, ElMessageBox } from 'element-plus';
+
+const iconList = ref([]);
+const itemFlag = ref(0);
+const searchValue = ref('');
+const dialogVisible = ref(false);
+const dialogIcon = ref({});
+
+const handleImport = (file) => {
+  api.uploadFile('/system/icon/importData', { file: file.file }).then((res) => {
+    ElMessage.success(res.message);
+    loadIcon();
+  });
+};
+
+const handleExport = () => {
+  api.downloadFile('/system/icon/exportData').then(res => api.saveFileLocal(res));
+};
+
+const handleUpload = (options) => {
+  return new Promise((resolve, reject) => {
+    api.uploadFile('/system/icon/upload', { file: options.file }).then((res) => {
+      const icon = iconList.value.find(item => item.itemFlag === options.file.itemFlag);
+      if (icon) {
+        icon.id = res.data.id;
+        icon.name = res.data.name;
+        icon.type = res.data.type;
+        icon.content = res.data.content;
+        icon.status = 2;
+      }
+      resolve();
+    }).catch(() => {
+      const index = iconList.value.findIndex(item => item.itemFlag === options.file.itemFlag);
+      iconList.value.splice(index, 1);
+      reject();
+    });
+  })
+};
+
+const handleBeforeUpload = (file) => {
+  file.itemFlag = ++itemFlag.value;
+  const isLt10M = file.size / 1024 / 1024 < 2;
+  if (!isLt10M) {
+    ElMessage.error('图片大小不能超过 2MB!');
+  } else {
+    iconList.value.unshift({ itemFlag: file.itemFlag, name: file.name, status: 1 });
+  }
+
+  return isLt10M;
+};
+
+const showIcon = (icon) => {
+  dialogIcon.value = icon;
+  dialogVisible.value = true;
+};
+
+const copyIcon = (icon) => {
+  clipboard.copy(icon.id);
+  ElMessage.success('复制成功');
+};
+
+const deleteIcon = (icon) => {
+  ElMessageBox.confirm('请确认是否删除？', '提示', { type: 'warning' }).then(() => {
+    api.post('/system/icon/delete', { id: icon }).then(res => {
+      const index = iconList.value.findIndex(item => item.id === icon.id);
+      if (index >= 0) {
+        iconList.value.splice(index, 1);
+      }
+      ElMessage.success(res.message);
+    });
+  }).catch(() => {});
+};
+
+const loadIcon = () => {
+  api.post('/system/icon/queryList').then(res => {
+    iconList.value = res.data || [];
+  });
+};
+
+onMounted(() => {
+  loadIcon();
+});
+</script>
+
+<style lang="scss" scoped>
+.upload-button {
+  display: flex;
+  flex-direction: row;
+  text-align: right;
+  justify-content: flex-end;
+}
+.icon {
+  margin-top: 20px;
+  padding: 10px;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, 250px);
+  grid-gap: 10px;
+  justify-content: center;
+  overflow-y: auto;
+}
+.icon-item {
+  width: 250px;
+  height: 70px;
+  background: #fff;
+  border: 1px solid #f0f0f0;
+  border-radius: 4px;
+  box-sizing: border-box;
+  cursor: pointer;
+  overflow: hidden;
+  display: flex;
+  flex-direction: row;
+
+  .icon-item-icon {
+    width: 60px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .icon-item-text {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    flex-grow: 1;
+    width: 1px;
+
+    .icon-item-name {
+      color: #333;
+    }
+    .icon-item-code {
+      color: #999;
+      font-size: 12px;
+      margin-top: 5px;
+    }
+  }
+  .icon-item-button {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 50px;
+  }
+  .icon-item-copy {
+    color: #67C23A;
+    font-size: 14px;
+  }
+  .icon-item-delete {
+    color: red;
+    font-size: 14px;
+    margin-top: 10px;
+  }
+}
+.icon-item:hover {
+  box-shadow: 0 4px 16px rgb(0 0 0 / 10%);
+}
+.dialog-icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+}
+</style>

package/src/views/log/loginLog.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="page-container">
+    <!--表格内容栏-->
+    <ac-table ref="dataTable"
+      pkName="id"
+      :filters="filters"
+      :filterFields="filterFields"
+      :columns="columns"
+    ></ac-table>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import tool from '@/utils/tool';
+
+const filters = ref({
+  name: '',
+  code: ''
+});
+const filterFields = ref([
+  { prop: 'userName', label: '登录人员' },
+  { prop: 'loginType', label: '登录类型' }
+]);
+const columns = ref([
+  {
+    prop: 'userName',
+    label: '登录人员',
+    width: 220,
+    formatter: (prop, value, row) => {
+      return value + (row.orgName ? ('（' + row.orgName + '）') : '');
+    }
+  },
+  { prop: 'createTime', label: '登录时间', width: 160, type: 'datetime' },
+  { prop: 'loginType', label: '登录类型', width: 120 },
+  { prop: 'ipAddress', label: 'IP地址', width: 120 },
+  { prop: 'browserInfo', label: '浏览器信息', minWidth: 120 },
+  { prop: 'operateInfo', label: '操作信息', width: 120 },
+  { prop: 'takeTime', label: '耗时', width: 120, formatter: (prop, value) => tool.formatTime(value) }
+]);
+</script>

package/src/views/log/operatorLog.vue

@@ -0,0 +1,176 @@
+<template>
+  <div class="page-container">
+    <!--表格内容栏-->
+    <ac-table ref="dataTable"
+      pkName="id"
+      :filters="filters"
+      :filterFields="filterFields"
+      :columns="columns"
+      @handleTableOperator="handleTableOperator"
+      @handleCellOperator="handleCellOperator"
+    >
+    </ac-table>
+    <!--新增/编辑/查看界面-->
+    <div class="edit-dialog">
+      <el-dialog
+        width="800px"
+        :append-to-body="true"
+        :title="dialogTitle"
+        v-model="dialogVisible"
+        :close-on-click-modal="false"
+        destroy-on-close
+        draggable
+      >
+        <el-form
+          ref="dataForm"
+          label-width="120px"
+          label-position="right"
+          :model="formData"
+          :disabled="!dialogEdit"
+          :rules="rules"
+          :hide-required-asterisk="!dialogEdit"
+        >
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="用户ID" prop="userId">
+                <el-input v-model="formData.userId"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="用户编号" prop="code">
+                <el-input v-model="formData.code"></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="用户姓名" prop="name">
+                <el-input v-model="formData.name"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="操作时间" prop="opTime">
+                <el-input v-model="formData.opTime"></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="url" prop="url">
+                <el-input v-model="formData.url"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="参数" prop="params">
+                <el-input v-model="formData.params"></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="耗时" prop="takeTime">
+                <el-input v-model="formData.takeTime"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="创建时间" prop="createTime">
+                <ac-datetime v-model="formData.createTime" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+        <template #footer>
+          <el-button
+            v-if="dialogEdit"
+            size="default"
+            type="info"
+            @click="dialogVisible=false"
+          >取消</el-button>
+          <el-button
+            v-if="dialogEdit"
+            size="default"
+            type="primary"
+            @click="submitForm"
+            :loading="editLoading"
+          >提交</el-button>
+          <el-button
+            v-if="!dialogEdit"
+            size="default"
+            type="info"
+            @click="dialogVisible=false"
+          >关闭</el-button>
+        </template>
+      </el-dialog>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, nextTick } from 'vue'
+import tool from '@/utils/tool';
+
+const filters = ref({
+  name: '',
+  code: ''
+});
+const filterFields = ref([
+  { prop: 'name', label: '操作人员' },
+]);
+const columns = ref([
+  {
+    prop: 'name',
+    label: '操作人员',
+    width: 220,
+    formatter: (prop, value, row) => {
+      return value + (row.orgName ? ('（' + row.orgName + '）') : '');
+    }
+  },
+  { prop: 'opTime', label: '操作时间', width: 160, type: 'datetime' },
+  { prop: 'url', label: '操作地址', minWidth: 250 },
+  { prop: 'params', label: '参数', minWidth: 250 },
+  { prop: 'takeTime', label: '耗时', width: 120, formatter: (prop, value) => tool.formatTime(value) }
+]);
+
+const dialogTitle = ref('');
+const dialogVisible = ref(false);
+const dialogEdit = ref(true);
+const editLoading = ref(false);
+const rules = ref({
+  userId: [{ required: true, message: '请输入用户ID', trigger: 'blur' }],
+  code: [{ required: true, message: '请输入用户编号', trigger: 'blur' }],
+  name: [{ required: true, message: '请输入用户姓名', trigger: 'blur' }],
+  opTime: [{ required: true, message: '请输入操作时间', trigger: 'blur' }],
+  url: [{ required: true, message: '请输入url', trigger: 'blur' }],
+  params: [{ required: true, message: '请输入参数', trigger: 'blur' }],
+  takeTime: [{ required: true, message: '请输入耗时', trigger: 'blur' }],
+  createTime: [{ required: true, message: '请输入创建时间', trigger: 'blur' }]
+});
+const formData = ref({});
+const dataForm = ref();
+
+const handleCellOperator = (property, value, row) => {
+  formData.value = Object.assign({}, row);
+  dialogVisible.value = true;
+  dialogEdit.value = false;
+  dialogTitle.value = '查看';
+
+  nextTick(() => {
+    dataForm.value && dataForm.value.clearValidate();
+  });
+};
+
+const handleTableOperator = (button, row) => {
+  dialogVisible.value = true;
+  dialogEdit.value = true;
+  dialogTitle.value = button.name;
+  if (button.buttonType === 'edit') {
+    formData.value = Object.assign({}, row, { button: button });
+  } else {
+    formData.value = { button: button };
+  }
+
+  nextTick(() => {
+    dataForm.value && dataForm.value.clearValidate();
+  });
+};
+</script>