更新 删除;修改项目;样式

src/views/toolManage/urls.vue

@@ -13,7 +13,7 @@
       </template>
       <div class="df">
         <el-card
-          v-for="item in pcData"
+          v-for="(item, index) in pcData"
           :key="item._id"
           class="mr20"
           style="width: 300px"
@@ -21,19 +21,31 @@
           <template #header>
             <div class="card-header df jcsb aic">
               <span>{{ item.name }}</span>
-              <el-button @click="edit(item)" type="text">修改</el-button>
+              <div>
+                <el-button
+                  @click="edit(item, index, item.type)"
+                  size="small"
+                  type="text"
+                  >修改</el-button
+                >
+                <el-popconfirm
+                  title="确认删除项目?"
+                  @confirm="deleteItem(item._id, index, item.type)"
+                >
+                  <template #reference>
+                    <el-button type="text" size="small">删除</el-button>
+                  </template>
+                </el-popconfirm>
+              </div>
             </div>
           </template>
           <div class="mb10 df jscb card-line aic" v-if="item.master_url">
             <div class="s-title">正式版:</div>
-            <el-button
-              size="medium"
-              type="primary"
-              @click="goTo(item.master_url)"
+            <el-button size="medium" type="text" @click="goTo(item.master_url)"
               >去访问</el-button
             >
             <el-button
-              size="medium"
+              size="small"
               type="primary"
               @click="copy2(item.master_url)"
               >复制链接</el-button
@@ -41,16 +53,10 @@
           </div>
           <div class="mb10 df jscb card-line aic" v-if="item.dev_url">
             <div class="s-title">测试版:</div>
-            <el-button size="medium" type="primary" @click="goTo(item.dev_url)"
+            <el-button size="medium" type="text" @click="goTo(item.dev_url)"
               >去访问</el-button
             >
-            <el-button size="medium" type="primary" @click="copy2(item.dev_url)"
-              >复制链接</el-button
-            >
-          </div>
-          <div class="mb10 df jscb card-line aic" v-if="item.api_url">
-            <div class="s-title">接口地址:</div>
-            <el-button size="medium" type="primary" @click="copy2(item.api_url)"
+            <el-button size="small" type="primary" @click="copy2(item.dev_url)"
               >复制链接</el-button
             >
           </div>
@@ -58,19 +64,25 @@
             <div class="s-title">接口文档:</div>
             <el-button
               size="medium"
-              type="primary"
+              type="text"
               @click="goTo(item.api_url + 'swagger-ui.html#/')"
               >去访问</el-button
             >
             <el-button
-              size="medium"
+              size="small"
               type="primary"
               @click="copy2(item.master_url)"
               >复制链接</el-button
             >
           </div>
+          <div class="mb10 df jscb card-line aic" v-if="item.api_url">
+            <div class="s-title">接口地址:</div>
+            <el-button size="small" type="primary" @click="copy2(item.api_url)"
+              >复制链接</el-button
+            >
+          </div>
           <div class="mb10 df jscb card-line aic" v-if="item.desc">
-            <div>备注:</div>
+            <div class="s-title">备注:</div>
             <div>{{ item.desc }}</div>
           </div></el-card
         >
@@ -83,13 +95,83 @@
         </div>
       </template>
       <div class="df">
-        <el-card v-for="item in wxData" :key="item._id" class="mr20">
+        <el-card
+          v-for="(item, index) in wxData"
+          :key="item._id"
+          class="mr20"
+          style="width: 350px"
+        >
           <template #header>
-            <div class="card-header">
+            <div class="card-header df jcsb aic">
               <span>{{ item.name }}</span>
+              <div>
+                <el-button
+                  @click="edit(item, index, item.type)"
+                  size="small"
+                  type="text"
+                  >修改</el-button
+                >
+                <el-popconfirm
+                  title="确认删除项目?"
+                  @confirm="deleteItem(item._id, index, item.type)"
+                >
+                  <template #reference>
+                    <el-button type="text" size="small">删除</el-button>
+                  </template>
+                </el-popconfirm>
+              </div>
             </div>
           </template>
-        </el-card>
+          <div class="mb10 df jscb card-line aic" v-if="item.master_url">
+            <div class="s-title">正式版:</div>
+            <el-popover placement="top" :width="200" trigger="hover">
+              <template #reference>
+                <el-button type="primary" size="small">显示二维码</el-button>
+              </template>
+              <el-image
+                style="width: 200px; height: 200px"
+                :src="item.master_url"
+              ></el-image>
+            </el-popover>
+          </div>
+          <div class="mb10 df jscb card-line aic" v-if="item.dev_url">
+            <div class="s-title">测试版:</div>
+            <el-popover placement="top" :width="200" trigger="hover">
+              <template #reference>
+                <el-button type="primary" size="small">显示二维码</el-button>
+              </template>
+              <el-image
+                style="width: 200px; height: 200px"
+                :src="item.dev_url"
+              ></el-image>
+            </el-popover>
+          </div>
+          <div class="mb10 df jscb card-line aic" v-if="item.api_url">
+            <div class="s-title">接口文档:</div>
+            <el-button
+              size="medium"
+              type="text"
+              @click="goTo(item.api_url + 'swagger-ui.html#/')"
+              >去访问</el-button
+            >
+            <el-button
+              size="small"
+              type="primary"
+              @click="copy2(item.master_url)"
+              >复制链接</el-button
+            >
+          </div>
+          <div class="mb10 df jscb card-line aic" v-if="item.api_url">
+            <div class="s-title">接口地址:</div>
+            <el-button size="small" type="primary" @click="copy2(item.api_url)"
+              >复制链接</el-button
+            >
+          </div>
+          <div class="mb10 df jscb card-line aic" v-if="item.desc">
+            <div class="s-title">备注:</div>
+            <div>{{ item.desc }}</div>
+          </div></el-card
+        >
       </div>
     </el-card>
     <el-dialog
@@ -248,9 +330,13 @@ const __ = db.command;
 let pcData = ref([]);
 let wxData = ref([]);
 async function init() {
+  let { data } = await p
+    .where({
+      deleted: __.neq(false),
+    })
+    .get();
   pcData.value = [];
   wxData.value = [];
-  let { data } = await p.get();
   if (data.length) {
     for (let i of data) {
       if (i.type == 1) {
@@ -264,6 +350,7 @@ async function init() {
 
 let modalVisable = ref(false);
 let currentItemId = ref(0);
+let currentItemIndex = ref(-1);
 let ruleFormRef = ref(null);
 let ruleForm = ref({
   api_url: "",
@@ -346,6 +433,12 @@ async function update() {
   init();
 }
 
+async function deleteItem(id, index, type) {
+  let res = await p.doc(id).remove();
+  modalVisable.value = false;
+  init();
+}
+
 function goTo(url) {}
 
 function copy2(url) {
@@ -367,12 +460,12 @@ onMounted(() => {
   align-items: center;
 }
 
-.card-line:first-child {
-  width: 100px;
-}
-
 .s-title {
   flex: 0 0 auto;
-  width: 70px;
+  width: 80px;
+}
+
+.card-line > div {
+  color: #555;
 }
 </style>