更新 项目管理

src/utils/chooseFile.js

@@ -0,0 +1,16 @@
+function chooseFile(type) {
+  return new Promise((resolve, reject) => {
+    let fileId = type + new Date().getTime();
+    let inputObj = document.createElement("input");
+    inputObj.setAttribute("id", fileId);
+    inputObj.setAttribute("type", "file");
+    inputObj.setAttribute("style", "visibility:hidden");
+    document.body.appendChild(inputObj);
+    inputObj.addEventListener("change", (e) => {
+      resolve(document.getElementById(fileId).files[0]);
+    });
+    inputObj.click();
+  });
+}
+
+export { chooseFile };

src/views/toolManage/urls.vue

@@ -1,9 +1,157 @@
 <template>
-  <el-card style="width: 95%">
-    <div class="df">
-      <el-card v-for="item in data"></el-card>
+  <div class="full-container-p24">
+    <div class="df jcfe pb20">
+      <el-button type="primary" @click="modalVisable = true"
+        >新增项目</el-button
+      >
     </div>
-  </el-card>
+    <el-card>
+      <template #header>
+        <div class="card-header">
+          <span>PC 项目</span>
+        </div>
+      </template>
+      <div class="df">
+        <el-card v-for="item in pcData" :key="item._id">
+          <template #header>
+            <div class="card-header">
+              <span>{{ item.name }}</span>
+            </div>
+          </template></el-card
+        >
+      </div>
+    </el-card>
+    <el-card style="margin-top: 30px">
+      <template #header>
+        <div class="card-header">
+          <span>小程序 项目</span>
+        </div>
+      </template>
+      <div class="df">
+        <el-card v-for="item in wxData" :key="item._id">
+          <template #header>
+            <div class="card-header">
+              <span>{{ item.name }}</span>
+            </div>
+          </template>
+        </el-card>
+      </div>
+    </el-card>
+    <el-dialog
+      title="新增项目"
+      v-model="modalVisable"
+      width="550px"
+      @close="resetForm"
+    >
+      <el-form
+        ref="ruleFormRef"
+        :model="ruleForm"
+        :rules="rules"
+        label-width="100px"
+        style="padding-right: 20px"
+      >
+        <el-form-item label="项目名称" prop="name">
+          <el-input
+            v-model="ruleForm.name"
+            placeholder="请输入项目名称"
+            style="width: 193px"
+          />
+        </el-form-item>
+        <el-form-item label="项目类型" prop="type">
+          <el-select
+            v-model="ruleForm.type"
+            placeholder="请选择项目类型"
+            @change="typeChange"
+          >
+            <el-option label="PC" value="1" />
+            <el-option label="小程序" value="2" />
+          </el-select>
+        </el-form-item>
+        <el-form-item
+          label="正式版地址"
+          prop="master_url"
+          v-if="ruleForm.type == 1"
+        >
+          <el-input
+            v-model="ruleForm.master_url"
+            type="textarea"
+            placeholder="正式版地址"
+          />
+        </el-form-item>
+        <el-form-item
+          label="测试版地址"
+          prop="dev_url"
+          v-if="ruleForm.type == 1"
+        >
+          <el-input
+            v-model="ruleForm.dev_url"
+            type="textarea"
+            placeholder="测试版地址"
+          />
+        </el-form-item>
+        <el-form-item
+          label="正式版二维码"
+          prop="master_url"
+          v-if="ruleForm.type == 2"
+        >
+          <el-image
+            v-if="ruleForm.master_url"
+            :src="ruleForm.master_url"
+            @click="upload('master_url')"
+            style="width: 100px"
+          ></el-image>
+          <el-button
+            v-else
+            size="small"
+            type="primary"
+            @click="upload('master_url')"
+            >上传</el-button
+          >
+        </el-form-item>
+        <el-form-item
+          label="测试版二维码"
+          prop="dev_url"
+          v-if="ruleForm.type == 2"
+        >
+          <el-image
+            v-if="ruleForm.dev_url"
+            :src="ruleForm.dev_url"
+            @click="upload('dev_url')"
+            style="width: 100px"
+          ></el-image>
+          <el-button
+            v-else
+            size="small"
+            type="primary"
+            @click="upload('dev_url')"
+            >上传</el-button
+          >
+        </el-form-item>
+        <el-form-item label="接口地址" prop="api_url">
+          <el-input
+            v-model="ruleForm.api_url"
+            type="textarea"
+            placeholder="接口地址"
+          />
+        </el-form-item>
+        <el-form-item label="备注" prop="desc">
+          <el-input
+            v-model="ruleForm.desc"
+            type="textarea"
+            placeholder="项目备注"
+          />
+        </el-form-item>
+        <el-form-item>
+          <div class="df jcfe">
+            <el-button @click="resetForm(ruleFormRef)">重置</el-button>
+            <el-button type="primary" @click="submitForm(ruleFormRef)"
+              >创建项目</el-button
+            >
+          </div>
+        </el-form-item>
+      </el-form>
+    </el-dialog>
+  </div>
 </template>
 
 <script setup>
@@ -12,14 +160,86 @@ import { AnonymousLogin, tcb } from "apis/cloudLogin";
 import _ from "lodash";
 import { ElMessage, ElMessageBox } from "element-plus";
 import store from "../../store";
+import { chooseFile } from "../../utils/chooseFile";
 const db = tcb.database();
 const p = db.collection("huihenduo_projects");
 const __ = db.command;
-let data = ref([]);
-
+let pcData = ref([]);
+let wxData = ref([]);
 async function init() {
-  let res = await p.get();
+  pcData.value = [];
+  wxData.value = [];
+  let { data } = await p.get();
+  if (data.length) {
+    for (let i of data) {
+      if (i.type == 1) {
+        pcData.value.push(i);
+      } else {
+        wxData.value.push(i);
+      }
+    }
+  }
+}
+
+let modalVisable = ref(false);
+let ruleFormRef = ref(null);
+let ruleForm = ref({
+  api_url: "",
+  desc: "",
+  dev_url: "",
+  master_url: "",
+  name: "",
+  type: "",
+});
+const rules = ref({
+  name: [{ required: true, message: "请填写项目名称", trigger: "blur" }],
+  type: [{ required: true, message: "请选择项目类型", trigger: "blur" }],
+  master_url: [
+    {
+      required: false,
+      message: `${
+        ruleForm.value.type == 1 ? "请填写正式版访问地址" : "请上传正式版二维码"
+      }`,
+      trigger: "blur",
+    },
+  ],
+  dev_url: [
+    {
+      required: false,
+      message: `${
+        ruleForm.value.type == 1 ? "请填写测试版访问地址" : "请上传测试版二维码"
+      }`,
+      trigger: "blur",
+    },
+  ],
+  api_url: [{ required: false, message: "请填写接口地址", trigger: "blur" }],
+  desc: [{ required: false, message: "请填写航次名称", trigger: "blur" }],
+});
+async function submitForm() {
+  let res = await p.add({
+    ...ruleForm.value,
+    createTime: db.serverDate(),
+  });
   console.log(res);
+  modalVisable.value = false;
+  init();
+}
+function resetForm() {
+  ruleFormRef.value.resetFields();
+}
+
+function typeChange() {
+  ruleForm.value.dev_url = "";
+  ruleForm.value.master_url = "";
+}
+
+async function upload(type) {
+  let filePath = await chooseFile(type);
+  let { download_url } = await tcb.uploadFile({
+    cloudPath: `projects/${new Date().getTime()}`,
+    filePath,
+  });
+  ruleForm.value[type] = download_url;
 }
 
 onMounted(() => {
@@ -28,4 +248,11 @@ onMounted(() => {
 </script>
 
 <style scoped>
+.el-textarea {
+  width: 380px;
+}
+
+.el-form-item {
+  align-items: center;
+}
 </style>