@arkxos/arkos-system 0.1.0

package/src/views/codeless/appVersion.vue

@@ -0,0 +1,593 @@
+<template>
+  <div class="page-container">
+    <el-container>
+      <el-aside class="page-aside" width="280px" v-drag v-collapse>
+        <div class="title">
+          <div class="title-content">应用程序</div>
+          <div class="title-button">
+            <span class="title-button-box" @click="addApp({})">
+              <el-tooltip placement="bottom" content="新增应用程序">
+                <ac-icon iconId="018dc9c3efed46e8b927" size="18" />
+              </el-tooltip>
+            </span>
+          </div>
+        </div>
+        <div class="filter-box">
+          <el-input placeholder="搜索" v-model="filterText" clearable />
+        </div>
+        <div class="page-aside-grow">
+          <el-tree
+            ref="tree"
+            class="tree"
+            node-key="id"
+            v-loading="treeLoading"
+            element-loading-text="数据加载中..."
+            :data="treeData"
+            :props="treeProps"
+            :highlight-current="true"
+            :default-expanded-keys="treeExpand"
+            :filter-node-method="filterNode"
+            :expand-on-click-node="!treeCheck"
+            :show-checkbox="treeCheck"
+            @node-click="nodeClick"
+          >
+            <template v-slot="{ data }">
+              <div class="node-item">
+                <span class="icon">
+                  <ac-icon color="#117fe8" iconId="018dc9c3efb74ac607cb" />
+                </span>
+                <span class="node-label" :title="data.text"><span>{{data.text}}</span></span>
+                <div class="node-button">
+                  <el-dropdown trigger="hover" placement="bottom-start">
+                    <span class="node-button-item">
+                      <ac-icon iconId="018dca6283a1e534a046" @click.stop />
+                    </span>
+                    <template #dropdown>
+                      <el-dropdown-menu>
+                        <el-dropdown-item @click="addAppVersion(data.data)">
+                          <ac-icon iconId="018dc9c3efb74ac607cb" color="#67C23A" style="margin-right: 5px" />新增应用版本
+                        </el-dropdown-item>
+                        <el-dropdown-item @click="updateNode(data.data)">
+                          <ac-icon iconId="018dca6db20c6a3aaf68" color="#0085f6" style="margin-right: 5px" />修改应用程序
+                        </el-dropdown-item>
+                        <el-dropdown-item @click="deleteNode(data.data)">
+                          <ac-icon iconId="018dc9c3efd3a0502886" color="#F56C6C" style="margin-right: 5px" />删除应用程序
+                        </el-dropdown-item>
+                      </el-dropdown-menu>
+                    </template>
+                  </el-dropdown>
+                </div>
+              </div>
+            </template>
+          </el-tree>
+        </div>
+      </el-aside>
+      <el-main class="page-main">
+        <ac-table
+          ref="dataTable"
+          pkName="id"
+          :filters="filters"
+          :filterFields="filterFields"
+          :columns="columns"
+          @handleCellOperator="handleCellOperator"
+          @handleTableOperator="handleTableOperator"
+        ></ac-table>
+      </el-main>
+    </el-container>
+  </div>
+
+  <!--新增/编辑版本类界面-->
+  <el-dialog
+    v-model="appVisible"
+    :title="appTitle"
+    width="600px"
+    :close-on-click-modal="false"
+    destroy-on-close
+    draggable
+  >
+    <el-form
+      ref="appForm"
+      label-width="100px"
+      label-position="right"
+      :model="appData"
+      :rules="appRules"
+    >
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="应用编码" prop="code">
+            <el-input v-model="appData.code" auto-complete="off"></el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="应用名称" prop="name">
+            <el-input v-model="appData.name" auto-complete="off"></el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="描述" prop="description">
+            <el-input v-model="appData.description" type="textarea" :rows="5" auto-complete="off"></el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <el-button
+        size="default"
+        type="info"
+        @click="appVisible=false"
+      >取消</el-button>
+      <el-button
+        type="success"
+        size="default"
+        @click="randomCode"
+      >生成编码</el-button>
+      <el-button
+        type="primary"
+        size="default"
+        :loading="appLoading"
+        @click="submitAppForm"
+      >提交</el-button>
+    </template>
+  </el-dialog>
+
+  <!--版本明细编辑-->
+  <el-dialog
+    v-model="dialogVisible"
+    :title="dialogTitle"
+    width="600px"
+    :close-on-click-modal="false"
+    destroy-on-close
+    draggable
+  >
+    <el-form
+      ref="dataForm"
+      label-width="100px"
+      label-position="right"
+      :disabled="!dialogEdit"
+      :model="formData"
+      :rules="rules"
+      :hide-required-asterisk="!dialogEdit"
+    >
+      <el-row v-if="!dialogEdit">
+        <el-col :span="24">
+          <el-form-item label="应用编码" prop="appCode">
+            <el-input v-model="formData.appCode" auto-complete="off"></el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="应用名称" prop="appId">
+            <ac-tree
+              v-model="formData.appId"
+              dataUrl="/system/app/queryTree"
+              :leafSelect="false"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="版本号" prop="version">
+            <el-input v-model="formData.version" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="应用类型" prop="type">
+            <ac-select v-model="formData.type" options="android,ios" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="应用程序" prop="fileId">
+            <ac-file v-model="formData.fileId" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="描述" prop="description">
+            <el-input type="textarea" v-model="formData.description" :rows="8" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <el-button
+        size="default"
+        type="info"
+        @click="dialogVisible=false"
+      >取消</el-button>
+      <el-button
+        v-if="dialogEdit"
+        type="primary"
+        size="default"
+        :loading="dialogLoading"
+        @click="submitDataForm"
+      >提交</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { ref, nextTick, watch, onMounted } from 'vue';
+import { ElMessage, ElMessageBox } from 'element-plus';
+import api from '@/http/api';
+import tool from '@/utils/tool';
+
+const tree = ref();
+const filterText = ref('');
+const treeLoading = ref(false);
+const treeKey = ref('');
+const treeData = ref([]);
+const treeExpand = ref([]);
+const treeCheck = ref(false);
+const treeProps = ref({
+  children: 'children',
+  label: function(data) {
+    return data.text +
+      (data.data.code !== undefined && data.data.code != null
+        ? ' [' + data.data.code + ']　'
+        : '　')
+  }
+});
+const currNode = ref(null);
+
+const appTitle = ref('');
+const appVisible = ref(false);
+const appLoading = ref(false);
+const appForm = ref();
+const appData = ref({});
+const appRules = ref({
+  name: [{ required: true, message: '请输入应用名称', trigger: ['blur', 'change'] }],
+  code: [{ required: true, message: '请输入应用编码', trigger: ['blur', 'change'] }],
+});
+
+const dataTable = ref();
+const filters = ref({
+  toolId: '',
+  name: '',
+});
+const filterFields = ref([
+  { prop: 'name', label: '名称' },
+]);
+const columns = ref([
+  { prop: 'appCode', label: '应用编码', minWidth: 100, sortable: false },
+  { prop: 'appName', label: '应用名称', minWidth: 100, sortable: false },
+  { prop: 'version', label: '版本号', width: 100, click: true },
+  { prop: 'type', label: '应用类型', width: 120 },
+  { prop: 'description', label: '描述', minWidth: 160 },
+  { prop: 'updateTime', label: '更新时间', width: 160, align: 'center', type: 'datetime' }
+]);
+
+const dialogVisible = ref(false);
+const dialogEdit = ref(false);
+const dialogTitle = ref('');
+const dialogLoading = ref();
+const dataForm = ref();
+const formData = ref({});
+const rules = ref({
+  version: [
+    { required: true, message: '请输入版本号', trigger: ['blur', 'change'] },
+    { max: 20, message: '名称长度最多只能是10个字符', trigger: ['blur', 'change'] }
+  ],
+  type: [
+    { required: true, message: '请选择类型', trigger: ['blur', 'change'] },
+  ],
+  appId: [
+    { required: true, message: '请选择应用名称', trigger: ['blur', 'change'] },
+  ],
+  fileId: [
+    { required: true, message: '请上传应用程序', trigger: ['blur', 'change'] },
+  ],
+});
+
+const filterNode = (value, data) => {
+  if (!value) return true;
+  return data.text.indexOf(value) >= 0 ||
+    (data.data.code != null && data.data.code.indexOf(value) >= 0);
+};
+
+const nodeClick = (data, treeNode) => {
+  if (currNode.value && currNode.value.id === data.id) {
+    treeNode.checked = !treeNode.checked;
+  } else {
+    treeNode.checked = true;
+  }
+
+  if (treeNode.checked) {
+    currNode.value = data;
+    filters.value.toolId = data.id || '';
+    filters.value.id = '';
+    dataTable.value.refreshPage(1);
+  } else {
+    tree.value.setCurrentKey(null);
+    currNode.value = null;
+    filters.value.toolId = '';
+    filters.value.id = '';
+    dataTable.value.refreshPage(1);
+  }
+};
+
+const addAppVersion = (data) => {
+  formData.value = { appId: data.id };
+  dialogTitle.value = '新增版本明细';
+  dialogVisible.value = true;
+  dialogEdit.value = true;
+};
+
+const addApp = () => {
+  showAppDialog('新增', {});
+};
+
+const showAppDialog = (tips, data) => {
+  appTitle.value = tips + '应用';
+  appVisible.value = true;
+  appData.value = Object.assign({}, data);
+  appForm.value && appForm.value.resetFields();
+};
+
+const updateNode = (data) => {
+  showAppDialog('修改', data);
+};
+
+const deleteNode = (data) => {
+  const url = '/system/app/delete';
+  ElMessageBox.confirm('请确认是否删除【' + data.name + '】？', '提示', { type: 'warning' }).then(() => {
+    api.post(url, { id: data.id }).then(res => {
+      ElMessage.success(res.message);
+      treeExpand.value.push(data.toolId || '0');
+      treeKey.value = data.toolId || '0';
+      loadTreeData();
+    });
+  }).catch(() => {});
+};
+
+const randomCode = () => {
+  appData.value.code = tool.uuid();
+};
+
+const submitAppForm = () => {
+  appForm.value && appForm.value.validate((valid) => {
+    if (valid) {
+      ElMessageBox.confirm('请确认是否提交？', '提示', { type: 'info' }).then(() => {
+        appLoading.value = true;
+        api.post('/system/app/save', appData.value).then(res => {
+          ElMessage.success(res.message);
+          appVisible.value = false;
+          appLoading.value = false;
+          treeExpand.value.push(res.data.toolId || '0');
+          treeKey.value = res.data.toolId || '0';
+          loadTreeData();
+        }).catch(() => {
+          appLoading.value = false;
+        });
+      }).catch(() => {});
+    }
+  });
+};
+
+const handleCellOperator = (prop, value, row) => {
+  formData.value = row;
+  dialogTitle.value = '编辑版本明细';
+  dialogVisible.value = true;
+  dialogEdit.value = false;
+};
+
+const handleTableOperator = (button, row) => {
+  if (button.buttonType === 'add') {
+    formData.value = { toolId: filters.value.toolId };
+    dialogTitle.value = '新增版本明细';
+    dialogVisible.value = true;
+    dialogEdit.value = true;
+  } else if (button.buttonType === 'edit') {
+    api.post('/system/appVersion/queryBy', { id: row.id }).then(res => {
+      formData.value = res.data || {};
+      dialogTitle.value = '编辑版本明细';
+      dialogVisible.value = true;
+      dialogEdit.value = true;
+    });
+  }
+};
+
+const submitDataForm = () => {
+  if (!/^\d{1,2}.\d{1,2}.\d{1,2}$/.test(formData.value.version)) {
+    ElMessage.error('版本号格式不正确，格式为：xx.xx.xx，示例：1.0.11');
+    return;
+  }
+
+  dataForm.value && dataForm.value.validate((valid) => {
+    if (valid) {
+      ElMessageBox.confirm('请确认是否提交？', '提示', { type: 'info' }).then(() => {
+        api.post('/system/appVersion/save', formData.value)
+          .then((res) => {
+            ElMessage.success(res.message);
+            dialogVisible.value = false;
+            dataTable.value.findPage();
+            loadTreeData();
+          }).catch(() => {});
+      }).catch(() => {});
+    } else {
+      ElMessage.error('数据录入不正确，请重新检查！');
+    }
+  });
+};
+
+const loadTreeData = () => {
+  treeLoading.value = true;
+  api.post('/system/app/queryTree').then(res => {
+    const node = tree.value.getCurrentNode();
+    if (node !== undefined && node != null) {
+      treeExpand.value = [node.id, '0'];
+    } else {
+      treeExpand.value = ['0'];
+    }
+    treeData.value = res.data.children;
+    treeLoading.value = false;
+    if (treeKey.value) {
+      nextTick(() => {
+        tree.value.setCurrentKey(treeKey.value);
+      });
+    }
+  }).catch(() => {
+    treeLoading.value = false;
+  });
+};
+
+watch(() => filterText.value, val => {
+  tree.value.filter(val);
+});
+
+onMounted(() => {
+  loadTreeData();
+});
+</script>
+
+<style scoped lang="scss">
+.title {
+  display: flex;
+  flex-direction: row;
+  margin-right: 10px;
+  height: 40px;
+  align-items: center;
+
+  .title-content {
+    flex-grow: 1;
+    font-size: 18px;
+  }
+
+  .title-button {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .title-button .button-list {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    .button-item {
+      margin: 0 5px 0 5px;
+    }
+  }
+
+  .title-button .title-button-box {
+    height: 30px;
+    width: 40px;
+    border-radius: 5px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    cursor: pointer;
+  }
+
+  .title-button .title-button-box:hover {
+    background: #eaeaea;
+    border: none;
+  }
+
+  .title-button .title-button-box:focus-visible {
+    outline: unset;
+  }
+}
+
+.filter-box {
+  margin-right: 10px;
+}
+
+.tree :deep(.el-tree-node__content) {
+  height: 40px;
+}
+
+.page-aside-grow {
+  width: 100% !important;
+
+  :deep(.el-tree) {
+    display: flex;
+    flex-direction: column;
+    width: 1px !important;
+  }
+
+  :deep(.el-tree-node) {
+    display: flex;
+    flex-direction: column;
+    width: 100% !important;
+  }
+
+  :deep(.el-tree-node__content) {
+    display: flex;
+    flex-grow: 1;
+  }
+}
+
+.node-item {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: 100%;
+
+  .icon {
+    display: flex;
+    align-items: center;
+  }
+
+  .node-label {
+    margin-left: 6px;
+    flex-grow: 1;
+    width: 1px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    display: flex;
+
+    > span {
+      width: 100%;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+  }
+  .node-button {
+    margin-right: 10px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .node-button .node-button-item {
+    height: 30px;
+    width: 40px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 5px;
+  }
+  .node-button .node-button-item:focus-visible {
+    outline: unset;
+  }
+}
+:deep(.el-tree-node:not(.is-current):focus>.el-tree-node__content) {
+  background-color: unset!important;
+}
+:deep(.el-tree-node:focus>.el-tree-node__content) {
+  background-color: unset!important;
+}
+:deep(.el-tree-node:focus>.el-tree-node__content:hover) {
+  background-color: #f5f7fa!important;
+}
+:deep(.el-tree-node.is-current:focus>.el-tree-node__content) {
+  background-color: #ecf5ff!important;
+}
+.node-item:hover {
+  .node-button .node-button-item:hover {
+    background: #eaeaea;
+  }
+}
+</style>