|
|
@@ -37,10 +37,11 @@
|
|
|
label="序号"
|
|
|
/>
|
|
|
<el-table-column align="center" prop="name" label="名称" />
|
|
|
- <el-table-column align="center" prop="type" label="类别" />
|
|
|
+ <el-table-column align="center" prop="category" label="类别" />
|
|
|
<el-table-column align="center" label="操作" width="200">
|
|
|
<template #default="scope">
|
|
|
<div class="edit">
|
|
|
+ <div class="look" @click="applyClick(scope.row)">打开项目</div>
|
|
|
<div class="look" @click="editClick(scope.row)">编辑</div>
|
|
|
<el-popconfirm
|
|
|
width="220"
|
|
|
@@ -111,10 +112,14 @@
|
|
|
placeholder="请选择类别"
|
|
|
style="width: 500px"
|
|
|
>
|
|
|
- <el-option label="小程序" value="1" />
|
|
|
- <el-option label="管理端" value="2" />
|
|
|
+ <el-option label="小程序" value="小程序" />
|
|
|
+ <el-option label="管理后台" value="管理后台" />
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
+ <el-form-item label="logo图标 :" prop="logoUrl">
|
|
|
+ <input type="file" @change="handleFileUpload" />
|
|
|
+ <img :src="imgUrl" alt="" style="width: 20px; height: 20px" />
|
|
|
+ </el-form-item>
|
|
|
<el-form-item label="应用链接 :" prop="applyLink">
|
|
|
<el-input
|
|
|
v-model="editRuleForm.applyLink"
|
|
|
@@ -137,6 +142,28 @@
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
</el-dialog>
|
|
|
+
|
|
|
+ <el-dialog
|
|
|
+ class="applyDialog"
|
|
|
+ v-model="applyVisible"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ :close-on-press-escape="false"
|
|
|
+ :title="applyTitle"
|
|
|
+ align-center
|
|
|
+ width="1800"
|
|
|
+ :before-close="cancelApply"
|
|
|
+ >
|
|
|
+ <div style="width: 100%; height: 800px">
|
|
|
+ <iframe
|
|
|
+ :src="iframeSrc"
|
|
|
+ width="100%"
|
|
|
+ height="100%"
|
|
|
+ frameborder="0"
|
|
|
+ scrolling="no"
|
|
|
+ >
|
|
|
+ </iframe>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -161,6 +188,7 @@ import { useStore } from "vuex";
|
|
|
const store = useStore();
|
|
|
const api = ref("");
|
|
|
const router = useRouter();
|
|
|
+import COS from "cos-js-sdk-v5";
|
|
|
// 表格数据
|
|
|
const loading = ref(false);
|
|
|
const tableData = reactive({
|
|
|
@@ -198,10 +226,16 @@ const editVisible = ref(false);
|
|
|
const editRef = ref();
|
|
|
const editRuleForm = reactive({
|
|
|
name: "", // 名称
|
|
|
- applyLink: "", // 类别
|
|
|
- type: "", // 应用链接
|
|
|
+ applyLink: "", // 应用链接
|
|
|
+ type: "", // 类别
|
|
|
id: "",
|
|
|
});
|
|
|
+const imgUrl = ref();
|
|
|
+
|
|
|
+// 打开项目弹窗
|
|
|
+const applyVisible = ref(false);
|
|
|
+const applyTitle = ref();
|
|
|
+const iframeSrc = ref();
|
|
|
|
|
|
// 表单验证
|
|
|
const editRules = reactive({
|
|
|
@@ -222,43 +256,43 @@ const editRules = reactive({
|
|
|
],
|
|
|
});
|
|
|
|
|
|
-// 查看房型列表
|
|
|
+// 应用管理分页数据
|
|
|
const getList = async () => {
|
|
|
- // loading.value = true;
|
|
|
- // let data = {
|
|
|
- // page: currentPage.value,
|
|
|
- // rows: pageSize.value,
|
|
|
- // managerId: sessionStorage.getItem("token"),
|
|
|
- // };
|
|
|
- // let res = await axios({
|
|
|
- // method: "post",
|
|
|
- // url: api.value + "/mhotel/housequeryPage.action",
|
|
|
- // headers: {
|
|
|
- // // token: sessionStorage.getItem("token"),
|
|
|
- // // user_head: sessionStorage.getItem("userhead"),
|
|
|
- // },
|
|
|
- // params: data,
|
|
|
- // });
|
|
|
- // console.log(res, "房型管理");
|
|
|
- // if (res.data.code == 200) {
|
|
|
- // loading.value = false;
|
|
|
- // tableData.list = res.data.data.pageList;
|
|
|
- // total.value = res.data.data.total;
|
|
|
- // // ElMessage({
|
|
|
- // // type: "success",
|
|
|
- // // showClose: true,
|
|
|
- // // message: res.data.message,
|
|
|
- // // center: true,
|
|
|
- // // });
|
|
|
- // } else {
|
|
|
- // loading.value = false;
|
|
|
- // ElMessage({
|
|
|
- // type: "error",
|
|
|
- // showClose: true,
|
|
|
- // message: res.data.message,
|
|
|
- // center: true,
|
|
|
- // });
|
|
|
- // }
|
|
|
+ loading.value = true;
|
|
|
+ let data = {
|
|
|
+ currentPage: currentPage.value,
|
|
|
+ pageCount: pageSize.value,
|
|
|
+ // managerId: sessionStorage.getItem("token"),
|
|
|
+ };
|
|
|
+ let res = await axios({
|
|
|
+ method: "get",
|
|
|
+ url: api.value + "/smartApply/queryPageSmartApply",
|
|
|
+ headers: {
|
|
|
+ // token: sessionStorage.getItem("token"),
|
|
|
+ // user_head: sessionStorage.getItem("userhead"),
|
|
|
+ },
|
|
|
+ params: data,
|
|
|
+ });
|
|
|
+ console.log(res, "应用管理分页数据");
|
|
|
+ if (res.data.code == 200) {
|
|
|
+ loading.value = false;
|
|
|
+ tableData.list = res.data.data.list;
|
|
|
+ total.value = res.data.data.total;
|
|
|
+ // ElMessage({
|
|
|
+ // type: "success",
|
|
|
+ // showClose: true,
|
|
|
+ // message: res.data.message,
|
|
|
+ // center: true,
|
|
|
+ // });
|
|
|
+ } else {
|
|
|
+ loading.value = false;
|
|
|
+ ElMessage({
|
|
|
+ type: "error",
|
|
|
+ showClose: true,
|
|
|
+ message: res.data.message,
|
|
|
+ center: true,
|
|
|
+ });
|
|
|
+ }
|
|
|
};
|
|
|
|
|
|
// 搜索功能
|
|
|
@@ -269,6 +303,10 @@ const searchBtn = lodash.debounce(async () => {
|
|
|
const addApply = async () => {
|
|
|
titleDialog.value = "新建应用";
|
|
|
editVisible.value = true;
|
|
|
+ editRef.value.resetFields();
|
|
|
+ editRuleForm.name = "";
|
|
|
+ editRuleForm.applyLink = "";
|
|
|
+ editRuleForm.type = "";
|
|
|
// let data = {
|
|
|
// linkId: row.id,
|
|
|
// };
|
|
|
@@ -317,6 +355,10 @@ const confirmEdit = (formEl) => {
|
|
|
const editClick = async (row) => {
|
|
|
titleDialog.value = "编辑应用";
|
|
|
editVisible.value = true;
|
|
|
+ editRuleForm.name = row.name;
|
|
|
+ editRuleForm.type = row.category;
|
|
|
+ editRuleForm.applyLink = row.urlLink;
|
|
|
+ editRuleForm.id = row.id;
|
|
|
// let data = {
|
|
|
// linkId: row.id,
|
|
|
// };
|
|
|
@@ -357,6 +399,201 @@ const cancelEdit = () => {
|
|
|
editVisible.value = false;
|
|
|
editRef.value.resetFields();
|
|
|
};
|
|
|
+const handleFileUpload = (event) => {
|
|
|
+ const cos = new COS({
|
|
|
+ SecretId: "AKIDCPVZdcWIxgHpy5FYxVyPiqkZGrhdXUBg",
|
|
|
+ SecretKey: "NkyCN3cz97qKaeXLvHOGxOcdS8f184pL",
|
|
|
+ SecurityToken: "1306339220",
|
|
|
+ Bucket: "wanzai-1306339220",
|
|
|
+ Region: "ap-shanghai",
|
|
|
+ });
|
|
|
+
|
|
|
+ const file = event.target.files[0];
|
|
|
+ console.log(event.target.files);
|
|
|
+
|
|
|
+ const key = event.target.files[0].name; // 设置上传到 COS 后的文件名
|
|
|
+
|
|
|
+ cos.putObject(
|
|
|
+ {
|
|
|
+ Bucket: "wanzai-1306339220",
|
|
|
+ Region: "ap-shanghai",
|
|
|
+ Key: key,
|
|
|
+ Body: file,
|
|
|
+ onProgress: function (progressData) {
|
|
|
+ console.log(JSON.stringify(progressData));
|
|
|
+ },
|
|
|
+ },
|
|
|
+ function (err, data) {
|
|
|
+ if (err) {
|
|
|
+ console.error(err);
|
|
|
+ } else {
|
|
|
+ console.log(data);
|
|
|
+ imgUrl.value = "https://" + data.Location;
|
|
|
+ // 成功
|
|
|
+ }
|
|
|
+ }
|
|
|
+ );
|
|
|
+};
|
|
|
+
|
|
|
+// 计算签名
|
|
|
+const getAuthorization = (opt, callback) => {
|
|
|
+ // 替换为自己服务端地址 获取put上传签名
|
|
|
+ const url = `http://127.0.0.1:3000/put-sign?ext=${opt.ext}`;
|
|
|
+ const xhr = new XMLHttpRequest();
|
|
|
+ xhr.open("GET", url, true);
|
|
|
+ xhr.onload = function (e) {
|
|
|
+ let credentials;
|
|
|
+ try {
|
|
|
+ const result = JSON.parse(e.target.responseText);
|
|
|
+ credentials = result;
|
|
|
+ } catch (e) {
|
|
|
+ callback("获取签名出错");
|
|
|
+ }
|
|
|
+ if (credentials) {
|
|
|
+ callback(null, {
|
|
|
+ securityToken: credentials.sessionToken,
|
|
|
+ authorization: credentials.authorization,
|
|
|
+ cosKey: credentials.cosKey,
|
|
|
+ cosHost: credentials.cosHost,
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ console.error(xhr.responseText);
|
|
|
+ callback("获取签名出错");
|
|
|
+ }
|
|
|
+ };
|
|
|
+ xhr.onerror = function (e) {
|
|
|
+ callback("获取签名出错");
|
|
|
+ };
|
|
|
+ xhr.send();
|
|
|
+};
|
|
|
+const uploadFile = (file, callback) => {
|
|
|
+ const fileName = file.name;
|
|
|
+ let ext = "";
|
|
|
+ const lastDotIndex = fileName.lastIndexOf(".");
|
|
|
+ if (lastDotIndex > -1) {
|
|
|
+ // 这里获取文件后缀 由服务端生成最终上传的路径
|
|
|
+ ext = fileName.substring(lastDotIndex + 1);
|
|
|
+ }
|
|
|
+ getAuthorization({ ext }, function (err, info) {
|
|
|
+ if (err) {
|
|
|
+ alert(err);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ const auth = info.authorization;
|
|
|
+ const securityToken = info.securityToken;
|
|
|
+ const Key = info.cosKey;
|
|
|
+ const protocol = location.protocol === "https:" ? "https:" : "http:";
|
|
|
+ const prefix = protocol + "//" + info.cosHost;
|
|
|
+ const url = prefix + "/" + camSafeUrlEncode(Key).replace(/%2F/g, "/");
|
|
|
+ const xhr = new XMLHttpRequest();
|
|
|
+ xhr.open("PUT", url, true);
|
|
|
+ xhr.setRequestHeader("Authorization", auth);
|
|
|
+ securityToken &&
|
|
|
+ xhr.setRequestHeader("x-cos-security-token", securityToken);
|
|
|
+ xhr.upload.onprogress = function (e) {
|
|
|
+ console.log(
|
|
|
+ "上传进度 " + Math.round((e.loaded / e.total) * 10000) / 100 + "%"
|
|
|
+ );
|
|
|
+ };
|
|
|
+ xhr.onload = function () {
|
|
|
+ if (/^2\d\d$/.test("" + xhr.status)) {
|
|
|
+ const ETag = xhr.getResponseHeader("etag");
|
|
|
+ callback(null, { url: url, ETag: ETag });
|
|
|
+ } else {
|
|
|
+ callback("文件 " + Key + " 上传失败，状态码：" + xhr.status);
|
|
|
+ }
|
|
|
+ };
|
|
|
+ xhr.onerror = function () {
|
|
|
+ callback("文件 " + Key + " 上传失败，请检查是否没配置 CORS 跨域规则");
|
|
|
+ };
|
|
|
+ xhr.send(file);
|
|
|
+ });
|
|
|
+};
|
|
|
+// 监听表单提交
|
|
|
+// document.getElementById('submitBtn').onclick = function (e) {
|
|
|
+// const file = document.getElementById('fileSelector').files[0];
|
|
|
+// if (!file) {
|
|
|
+// document.getElementById('msg').innerText = '未选择上传文件';
|
|
|
+// return;
|
|
|
+// }
|
|
|
+// file &&
|
|
|
+// uploadFile(file, function (err, data) {
|
|
|
+// console.log(err || data);
|
|
|
+// document.getElementById('msg').innerText = err
|
|
|
+// ? err
|
|
|
+// : '上传成功，ETag=' + data.ETag;
|
|
|
+// });
|
|
|
+// };
|
|
|
+// })();
|
|
|
+
|
|
|
+// const beforePicUpload = async () => {
|
|
|
+// await getSign();
|
|
|
+// };
|
|
|
+// const getSign = async () => {
|
|
|
+// //让这个请求变成同步请求
|
|
|
+// let data = { suffix: ".png" };
|
|
|
+// let res = await axios({
|
|
|
+// method: "get",
|
|
|
+// url: api.value + "/upload/ossSign",
|
|
|
+// headers: {},
|
|
|
+// params: data,
|
|
|
+// });
|
|
|
+// console.log(res, "编辑中查找图片");
|
|
|
+// // await this.$http.get("/common/oss/sign").then(response => {
|
|
|
+// // //接收预签名url链接
|
|
|
+// // console.log(response.data.data);// response.data
|
|
|
+// // });
|
|
|
+// uploadUrl.value = response.data.data;
|
|
|
+// };
|
|
|
+// const uploadImage = (file) => {
|
|
|
+// // 这里的`file`参数是要上传的文件对象
|
|
|
+// // 在这里根据需要添加一些逻辑，如显示进度条
|
|
|
+// console.log(file, "upload");
|
|
|
+
|
|
|
+// return new Promise((resolve, reject) => {
|
|
|
+// const xhr = new XMLHttpRequest();
|
|
|
+// //element-ui默认使用post提交，但是我们生成的url需要使用 put 提交
|
|
|
+// //需要指定 put 直传，以及this.uploadUrl（后端返回的url）
|
|
|
+// xhr.open("PUT", uploadUrl.value, true);
|
|
|
+// //设置上传文件的类型
|
|
|
+// xhr.setRequestHeader("Content-Type", file.file.type); // 或者 file.type
|
|
|
+// xhr.onreadystatechange = () => {
|
|
|
+// if (xhr.readyState === 4) {
|
|
|
+// if (xhr.status === 200) {
|
|
|
+// resolve(xhr.response);
|
|
|
+// //进入到这里就表明上传成功了
|
|
|
+// //我这里对后端返回的url进行截取方便存入数据库，因为前端还需要展示图片
|
|
|
+// let indexOf = this.uploadUrl.indexOf("?");
|
|
|
+// this.addForm.pic = this.uploadUrl.slice(0, indexOf);
|
|
|
+// } else {
|
|
|
+// reject(xhr.statusText);
|
|
|
+// }
|
|
|
+// }
|
|
|
+// };
|
|
|
+// xhr.onerror = () => {
|
|
|
+// reject(xhr.statusText);
|
|
|
+// };
|
|
|
+// //发送
|
|
|
+// xhr.send(file.file); //或者 file
|
|
|
+// });
|
|
|
+// };
|
|
|
+// // 文件上传成功时的钩子
|
|
|
+// const handleAvatarSuccess = (response, uploadFile) => {
|
|
|
+// console.log(uploadFile.raw, "上传成功");
|
|
|
+// };
|
|
|
+// // 上传文件之前的钩子，参数为上传的文件
|
|
|
+// const beforeAvatarUpload = (rawFile) => {
|
|
|
+// if (rawFile.type !== "image/jpeg" && rawFile.type !== "image/png") {
|
|
|
+// ElMessage.error("图片格式必须为JPG/PNG格式!");
|
|
|
+// return false;
|
|
|
+// } else if (rawFile.size / 1024 / 1024 > 10) {
|
|
|
+// ElMessage.error("图片的大小不能超过10MB!");
|
|
|
+// return false;
|
|
|
+// }
|
|
|
+// return true;
|
|
|
+// };
|
|
|
+
|
|
|
+// (-------------------------------------------------------------)
|
|
|
|
|
|
//删除按钮
|
|
|
const del = async (row) => {
|
|
|
@@ -394,6 +631,18 @@ const del = async (row) => {
|
|
|
// console.log(res);
|
|
|
};
|
|
|
|
|
|
+// 打开别的项目
|
|
|
+const applyClick = (row) => {
|
|
|
+ applyVisible.value = true;
|
|
|
+ applyTitle.value = "嵌套项目";
|
|
|
+ applyTitle.value = row.name;
|
|
|
+ iframeSrc.value = row.urlLink;
|
|
|
+ console.log(row.urlLink);
|
|
|
+};
|
|
|
+const cancelApply = () => {
|
|
|
+ applyVisible.value = false;
|
|
|
+};
|
|
|
+
|
|
|
// 多选框功能
|
|
|
const handleSelectionChange = (val) => {
|
|
|
console.log(val);
|
|
|
@@ -419,9 +668,6 @@ onBeforeMount(async () => {
|
|
|
api.value = store.state.user.api;
|
|
|
getList();
|
|
|
});
|
|
|
-onUnmounted(() => {
|
|
|
- // document.removeEventListener("keyup", Enters);
|
|
|
-});
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
@@ -638,46 +884,7 @@ onUnmounted(() => {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- // 指纹弹窗
|
|
|
- :deep(.fingerprint) {
|
|
|
- width: 611px;
|
|
|
- height: 486px;
|
|
|
- border-radius: 11px;
|
|
|
- .el-dialog__header {
|
|
|
- border-radius: 11px 11px 0 0;
|
|
|
- background: rgba(237, 241, 245, 1);
|
|
|
- font-weight: 600;
|
|
|
- margin: 0;
|
|
|
-
|
|
|
- .el-dialog__headerbtn {
|
|
|
- outline: none;
|
|
|
- }
|
|
|
- }
|
|
|
- .el-dialog__body {
|
|
|
- padding: 0;
|
|
|
- .elbody {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- padding: 20px 20px;
|
|
|
- font-size: 18px;
|
|
|
- color: #000;
|
|
|
- border-bottom: 0.5px solid #ccc;
|
|
|
-
|
|
|
- i {
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .el-dialog__footer {
|
|
|
- .el-button--primary {
|
|
|
- background: rgba(41, 109, 227, 1);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 身份证读取
|
|
|
- :deep(.addIdentityCard) {
|
|
|
+ :deep(.applyDialog) {
|
|
|
// height: 420px;
|
|
|
border-radius: 11px;
|
|
|
.el-dialog__header {
|
|
|
@@ -690,46 +897,7 @@ onUnmounted(() => {
|
|
|
}
|
|
|
}
|
|
|
.el-dialog__body {
|
|
|
- padding: 30px 20px 10px 20px;
|
|
|
- height: 330px;
|
|
|
- font-size: 16px;
|
|
|
- font-weight: 600;
|
|
|
- color: #000;
|
|
|
- .el-steps {
|
|
|
- width: 600px;
|
|
|
- transform: translateX(90px);
|
|
|
- margin: 0 0 40px 0;
|
|
|
- }
|
|
|
- .title {
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- .icons {
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- img {
|
|
|
- width: 70px;
|
|
|
- margin: 40px 0;
|
|
|
- }
|
|
|
- .loading {
|
|
|
- animation: move 3s linear;
|
|
|
- }
|
|
|
- @keyframes move {
|
|
|
- 0% {
|
|
|
- transform: rotate(0);
|
|
|
- }
|
|
|
- 100% {
|
|
|
- transform: rotate(360deg);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .retry {
|
|
|
- text-align: center;
|
|
|
- span {
|
|
|
- color: red;
|
|
|
- padding: 0 8px;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- }
|
|
|
+ padding: 10px;
|
|
|
}
|
|
|
}
|
|
|
|
hzj18279462576@163.com
