@arkxos/arkos-system 0.1.0

package/src/views/mobile/mobile.vue

@@ -0,0 +1,568 @@
+<template>
+  <div class="mobile-box">
+    <div class="button-box">
+      <div class="button-item">
+        <el-upload
+          action=""
+          :http-request="handleImport"
+          :show-file-list="false"
+          accept=".dat"
+        >
+          <el-button type="success">
+            <ac-icon
+              iconId="018dcc257a83b0d6deab"
+              title="导入移动端"
+              style="margin-right: 8px"
+            />导入移动端
+          </el-button>
+        </el-upload>
+
+        <el-button type="primary" @click="downloadMobile({})">
+          <ac-icon
+            iconId="018dcc257a840e260284"
+            title="导出所有移动端"
+            style="margin-right: 8px"
+          />导出所有移动端
+        </el-button>
+      </div>
+    </div>
+    <el-tooltip
+      effect="light"
+      content="新增移动端"
+      popper-class="padding-10-15"
+    >
+      <div class="add-box" @click="addMobile">
+        <ac-icon
+          iconId="018dc9c3efed46e8b927"
+          size="60"
+          color="#474747"
+        />
+      </div>
+    </el-tooltip>
+    <div
+      class="item-box"
+      v-for="item in appList"
+      :key="item.id"
+    >
+      <div class="item-main">
+        <div class="item-title">
+          <div class="item-name">
+            <span v-if="item.edit">
+              <el-input
+                :ref="el => setRefs(el, item)"
+                v-model="item.newName"
+                @blur="saveMobile(item)"
+                @keyup.enter="saveMobile(item)"
+              />
+            </span>
+            <span v-else>{{item.name}}</span>
+          </div>
+          <el-tooltip
+            effect="light"
+            content="编辑"
+            popper-class="padding-10-15"
+          >
+            <ac-icon
+              size="16"
+              color=""
+              iconId="018ece4f6918a49a759b"
+              @click="editMobile(item)"
+            />
+          </el-tooltip>
+        </div>
+        <div class="item-remark">
+          <span>{{item.remark}}</span>
+        </div>
+        <div class="item-button">
+          <el-tooltip
+            effect="light"
+            content="移动端二维码"
+            popper-class="padding-10-15"
+          >
+            <ac-icon
+              size="20"
+              iconId="018ece4f932186f31825"
+              color="#909399"
+              @click="viewMobile(item)"
+            />
+          </el-tooltip>
+          <el-tooltip
+            effect="light"
+            content="预览"
+            popper-class="padding-10-15"
+          >
+            <ac-icon
+              size="20"
+              iconId="018dc9c3efed3042d4d3"
+              color="#909399"
+              @click="openMobile(item)"
+            />
+          </el-tooltip>
+          <el-tooltip
+            effect="light"
+            content="设计"
+            popper-class="padding-10-15"
+          >
+            <ac-icon
+              size="20"
+              iconId="018dca6db20c6a3aaf68"
+              color="#0085f6"
+              @click="designMobile(item)"
+            />
+          </el-tooltip>
+          <el-tooltip
+            effect="light"
+            content="复制"
+            popper-class="padding-10-15"
+          >
+            <ac-icon
+              size="20"
+              iconId="018ece4f6cdc1f74eab3"
+              color="#67C23A"
+              @click="copyMobile(item)"
+            />
+          </el-tooltip>
+          <el-tooltip
+            effect="light"
+            content="下载"
+            popper-class="padding-10-15"
+          >
+            <ac-icon
+              size="20"
+              iconId="018dc9c3efed1f464d38"
+              color="#FF8C00"
+              @click="downloadMobile(item)"
+            />
+          </el-tooltip>
+          <el-tooltip
+            effect="light"
+            content="删除"
+            popper-class="padding-10-15"
+          >
+            <ac-icon
+              size="20"
+              iconId="018dc9c3efd3a0502886"
+              color="#F56C6C"
+              @click="deleteMobile(item)"
+            />
+          </el-tooltip>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <el-dialog
+    v-model="appVisible"
+    :title="appTitle"
+    width="500px"
+    :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="name">
+            <el-input v-model="appData.name" auto-complete="off"></el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row v-if="appData.id">
+        <el-col :span="24">
+          <el-form-item label="首页" prop="homeId">
+            <ac-remote-select
+              v-model="appData.homeId"
+              data-url="/system/mobilePage/queryList"
+              :query="{mobileId: appData.id, type: '2'}"
+              :loadAll="true"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row v-if="appData.id">
+        <el-col :span="24">
+          <el-form-item label="登录页" prop="loginId">
+            <ac-remote-select
+              v-model="appData.loginId"
+              data-url="/system/mobilePage/queryList"
+              :query="{mobileId: appData.id, type: '2'}"
+              :loadAll="true"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="备注" prop="remark">
+            <el-input v-model="appData.remark" type="textarea" :rows="5" />
+          </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="primary"
+        size="default"
+        :loading="appLoading"
+        @click="submitMobileForm"
+      >提交</el-button>
+    </template>
+  </el-dialog>
+
+  <!--页面编辑-->
+  <el-dialog
+    v-model="editorVisible"
+    class="no-padding no-header no-scroll"
+    :show-header="false"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    destroy-on-close
+    fullscreen
+    draggable
+  >
+    <MobileEditor
+      ref="mobileEditor"
+      v-bind="editorOptions"
+      @quit="editorVisible = false"
+    />
+  </el-dialog>
+
+  <!--二维码查看-->
+  <el-dialog
+    v-model="viewVisible"
+    :title="viewTitle"
+    width="500px"
+    :show-header="false"
+    :close-on-click-modal="false"
+    destroy-on-close
+    draggable
+  >
+    <div class="view-box">
+      <div class="view-image">
+        <el-image
+          :src="viewUrl"
+          style="width:300px;height:300px"
+          fit="scale-down"
+        />
+      </div>
+      <div class="view-footer">
+        <el-input v-model="mobileUrl">
+          <template #append>
+            <ac-icon
+              size="18"
+              iconId="018dc9c3efb82f31c161"
+              title="复制"
+              @click="copyUrl"
+            />
+          </template>
+        </el-input>
+      </div>
+    </div>
+    <template #footer>
+      <el-button
+        size="default"
+        type="info"
+        @click="viewVisible=false"
+      >关闭</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import api from '@/http/api';
+import { ElMessage, ElMessageBox } from 'element-plus';
+import tool from '@/utils/tool';
+import MobileEditor from './editor.vue';
+import clipboard from 'clipboard';
+
+const appList = ref([]);
+const appVisible = ref(false);
+const appTitle = ref('');
+const appForm = ref();
+const appData = ref({});
+const appLoading = ref(false);
+const appRules = ref({
+  name: [
+    { required: true, message: '名称不能为空！', trigger: 'blur' },
+    { max: 50, message: '名称长度最多只能是50个字符', trigger: ['blur', 'change'] }
+  ],
+  title: [
+    { required: true, message: '标题不能为空！', trigger: 'blur' },
+    { max: 50, message: '标题长度最多只能是50个字符', trigger: ['blur', 'change'] }
+  ],
+  remark: [
+    { max: 4000, message: '备注长度最多只能是4000个字符', trigger: ['blur', 'change'] }
+  ],
+});
+
+const editorVisible = ref(false);
+const editorOptions = ref({});
+const mobileEditor = ref();
+const viewVisible = ref(false);
+const viewTitle = ref('');
+const viewUrl = ref('');
+const mobileUrl = ref('');
+
+const addMobile = () => {
+  appData.value = {};
+  appTitle.value = '新增移动端';
+  appLoading.value = false;
+  appVisible.value = true;
+};
+
+const editMobile = (item) => {
+  if (!item) return;
+
+  appData.value = tool.deepClone(item);
+  appTitle.value = '编辑移动端';
+  appLoading.value = false;
+  appVisible.value = true;
+};
+
+const saveMobile = (item) => {
+  if (!item || !item.newName || item.newName === item.name) {
+    item.edit = false;
+    return;
+  }
+
+  const data = Object.assign({}, item, { name: item.newName });
+  api.post('/system/mobile/updateName', data).then(res => {
+    item.edit = false;
+    if (res.code === '1') {
+      item.name = item.newName;
+      ElMessage.success(res.message);
+    } else {
+      ElMessage.error(res.message);
+    }
+  });
+};
+
+const submitMobileForm = () => {
+  appForm.value.validate(valid => {
+    if (valid) {
+      ElMessageBox.confirm('请确认是否提交？', '提示', { type: 'info' }).then(() => {
+        appLoading.value = true;
+        api.post('/system/mobile/save', appData.value).then(res => {
+          if (res.code === '1') {
+            appVisible.value = false;
+            ElMessage.success(res.message);
+            loadMobileData();
+          } else {
+            ElMessage.error(res.message);
+          }
+          appLoading.value = false;
+        }).catch(() => {
+          appLoading.value = false;
+        })
+      });
+    } else {
+      ElMessage.error('数据录入不正确，请重新检查！');
+    }
+  });
+};
+
+const viewMobile = (app) => {
+  mobileUrl.value = createMobileUrl(app.id);
+  api.createQrCode(mobileUrl.value).then((res) => {
+    viewUrl.value = URL.createObjectURL(new Blob([res.data]));
+  });
+  viewTitle.value = '移动端【' + app.name + '】二维码'
+  viewVisible.value = true;
+};
+
+const copyUrl = () => {
+  clipboard.copy(mobileUrl.value);
+  ElMessage.success('已复制到剪贴板');
+};
+
+const openMobile = (app) => {
+  window.open(createMobileUrl(app.id));
+};
+
+const createMobileUrl = (id) => {
+  const protocol = window.location.protocol;
+  const hostname = window.location.hostname;
+  const port = window.location.port;
+  return protocol + '//' + hostname + ':' + port + '/mobile.html?mobileId=' + id;
+};
+
+const copyMobile = (app) => {
+  ElMessageBox.confirm('请确认是否复制移动端【' + app.name + '】？', '提示', { type: 'info' }).then(() => {
+    api.post('/system/mobile/copy', app).then(res => {
+      if (res.code === '1') {
+        ElMessage.success(res.message);
+        loadMobileData();
+      } else {
+        ElMessage.error(res.message);
+      }
+    });
+  });
+};
+
+const downloadMobile = (app) => {
+  api.downloadFile('/system/mobile/exportData', app).then(res => api.saveFileLocal(res));
+};
+
+const deleteMobile = (app) => {
+  ElMessageBox.confirm('请确认是否删除移动端【' + app.name + '】？', '提示', { type: 'warning' }).then(() => {
+    api.post('/system/mobile/delete', app).then(res => {
+      if (res.code === '1') {
+        ElMessage.success(res.message);
+        loadMobileData();
+      } else {
+        ElMessage.error(res.message);
+      }
+    });
+  });
+};
+
+const handleImport = (file) => {
+  api.uploadFile('/system/mobile/importData', { file: file.file }).then((res) => {
+    ElMessage.success(res.message);
+    loadMobileData();
+  });
+};
+
+const designMobile = (mobile) => {
+  editorOptions.value.id = mobile.id;
+  editorVisible.value = true;
+};
+
+const loadMobileData = () => {
+  appList.value = [];
+  api.post('/system/mobile/queryList').then(res => {
+    appList.value = res.data || [];
+  });
+};
+
+onMounted(() => {
+  loadMobileData();
+});
+</script>
+
+<style scoped lang="scss">
+.mobile-box {
+  padding: 20px;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, 300px);
+  grid-gap: 15px;
+  justify-content: center;
+  align-content: flex-start;
+  overflow: auto;
+  height: calc(100% - 40px);
+  background: #eee;
+  .button-box {
+    width: 100%;
+    grid-column: 1 / -1;
+    text-align: right;
+    .button-item {
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-end;
+      gap: 15px;
+    }
+  }
+  .add-box, .item-box {
+    width: 300px;
+    height: 160px;
+    background: #ffffff;
+    border-radius: 10px;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-content: center;
+  }
+
+  .add-box {
+    cursor: pointer;
+  }
+
+  .item-box {
+    .item-main {
+      width: 100%;
+      padding: 10px 15px;
+      box-sizing: border-box;
+
+      .item-title {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        align-items: center;
+        height: 32px;
+
+        .item-name {
+          flex-grow: 1;
+          margin-right: 8px;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          box-sizing: border-box;
+          color: #333333;
+          font-weight: bold;
+          font-size: 16px;
+        }
+
+        .ac-icon {
+          flex-shrink: 0;
+          cursor: pointer;
+        }
+      }
+
+      .item-remark {
+        margin-top: 5px;
+        color: #888888;
+        font-size: 12px;
+        line-height: 1.5;
+        height: 75px;
+        overflow: hidden;
+        display: -webkit-box;
+        -webkit-line-clamp: 4;
+        -webkit-box-orient: vertical;
+
+        > span {
+          height: 75px;
+          width: 100%;
+          display: block;
+        }
+      }
+
+      .item-button {
+        margin-top: 5px;
+        text-align: right;
+
+        .ac-icon {
+          cursor: pointer;
+          margin-left: 15px;
+        }
+      }
+    }
+  }
+}
+.view-box {
+  .view-image {
+    width: 100%;
+    text-align: center;
+  }
+
+  .view-footer {
+    :deep(.el-input-group__append) {
+      padding: 0 10px;
+    }
+    .ac-icon {
+      cursor: pointer;
+    }
+  }
+}
+</style>