From d1692a1f51e5b18b7845bdf1cb16609d0fc9d2a9 Mon Sep 17 00:00:00 2001
From: a0049873 <79py69t9wb@privaterelay.appleid.com>
Date: Tue, 19 Jul 2022 15:06:26 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=8A=E6=9E=B6=E5=8A=9F=E8=83=BD=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/PutOnTheShelf.vue              | 250 ++++++++++++------
 1 file changed, 168 insertions(+), 82 deletions(-)

diff --git a/front/src/views/capacityOnTheShelf/components/PutOnTheShelf.vue b/front/src/views/capacityOnTheShelf/components/PutOnTheShelf.vue
index 2af6eee3..7beec4b7 100644
--- a/front/src/views/capacityOnTheShelf/components/PutOnTheShelf.vue
+++ b/front/src/views/capacityOnTheShelf/components/PutOnTheShelf.vue
@@ -2,7 +2,7 @@
  * @Author: hisense.liangjunhua
  * @Date: 2022-06-17 14:11:08
  * @LastEditors: hisense.liangjunhua
- * @LastEditTime: 2022-07-18 14:43:47
+ * @LastEditTime: 2022-07-19 14:50:30
  * @Description: 上架
 -->
 <template>
@@ -15,7 +15,7 @@
       </div>
       <template v-if="title.isConfigure">
         <div class="bottom">
-          <div class="items" v-if="data[title.name].length > 0">
+          <!-- <div class="items" v-if="data[title.name].length > 0">
             <div
               class="item"
               v-for="(val, index) in data[title.name]"
@@ -42,8 +42,92 @@
                 <div @click="del(title.name, index)">删除</div>
               </div>
             </div>
+          </div> -->
+          <div
+            v-for="(val, index) in data[title.name]"
+            :key="'key1' + val.name + index"
+          >
+            <div
+              style="
+                font-size: 0.18rem;
+                font-weight: 600;
+                display: flex;
+                justify-content: flex-start;
+              "
+            >
+              <span>{{ title.name }}-{{ index + 1 }}</span>
+              <a-popconfirm
+                :title="'是否删除该条' + title.name + '?'"
+                ok-text="是"
+                cancel-text="否"
+                @confirm="del(title.name, index)"
+              >
+                <div class="del">
+                  <i class="delImg"></i>
+                  <div>删除</div>
+                </div>
+              </a-popconfirm>
+            </div>
+            <div
+              class="form"
+              v-for="attr in props.configure.filter(
+                (item, index2) => item.name === title.name
+              )[0].list"
+              :key="'key2' + attr.name + index2"
+            >
+              <span>{{ attr.name }}</span>
+              <a-input
+                disabled
+                v-model:value="val[attr.field]"
+                :maxlength="24"
+                :placeholder="'请填写' + attr.name + ',不超过24个字符'"
+                v-if="attr.type == 'input'"
+              />
+              <template v-if="attr.type == 'input2'">
+                <a-input
+                  disabled
+                  v-model:value="val[attr.field]"
+                  :placeholder="'请填写' + attr.name"
+                />
+              </template>
+              <a-textarea
+                disabled
+                v-model:value="val[attr.field]"
+                :showCount="true"
+                :maxlength="200"
+                :placeholder="'请填写' + attr.name"
+                v-else-if="attr.type == 'textArea'"
+              />
+              <!-- <a-radio-group
+                v-model:value="val[attr.field]"
+                :options="val.options"
+                @change="radioChange"
+                v-else-if="attr.type == 'radio'"
+              /> -->
+              <div v-else-if="attr.type == 'radio'">
+                {{ val[attr.field] + (attr.company || '') }}
+              </div>
+              <span v-else-if="attr.type === 'image'">
+                <a-image :width="85" :height="60" :src="val.img" />
+              </span>
+              <!-- <upload
+                :key="showKey"
+                type="图片"
+                btnName="上传图片"
+                :maxCount="1"
+                :data="val"
+                :list="[]"
+                tip="支持图片类型，大小不超过100M"
+                v-else-if="val.type == 'image'"
+              ></upload> -->
+            </div>
+          </div>
+          <!-- <div class="add" @click="add(title.name)">
+            添加更多{{ title.name }}
+          </div> -->
+          <div style="font-size: 0.18rem; font-weight: 600">
+            <span>{{ title.name }}-{{ data[title.name].length + 1 }}</span>
           </div>
-          <div class="add">添加更多{{ title.name }}</div>
           <div
             class="form"
             v-for="(val, index) in props.configure.filter(
@@ -112,7 +196,7 @@
           </div>
           <div class="submit">
             <a-button type="primary" @click="add(title.name)">
-              添加更多
+              添加更多{{ title.name }}
             </a-button>
           </div>
         </div>
@@ -248,7 +332,7 @@
             </a-button>
             <a-select
               v-else-if="item.type == 'select' && item.name == '使用方式'"
-              style="width: 240px"
+              style="width: 2.4rem"
               v-model:value="item.note1"
               :placeholder="'请选择' + item.name"
               @change="showTypeClick"
@@ -263,7 +347,7 @@
             </a-select>
             <a-select
               v-else-if="item.type == 'select' && item.name !== '归属部门'"
-              style="width: 240px"
+              style="width: 2.4rem"
               v-model:value="item.note1"
               :placeholder="'请选择' + item.name"
             >
@@ -277,7 +361,7 @@
             </a-select>
             <a-select
               v-else-if="item.name === '归属部门'"
-              style="width: 240px"
+              style="width: 2.4rem"
               v-model:value="item.note1"
               show-search
               placeholder="请输入关键字"
@@ -314,7 +398,7 @@
               :title="titleName"
               @ok="handleOk"
               @cancel="handleCancel"
-              style="width: 960px"
+              style="width: 9.6rem"
             >
               <div>
                 <a-transfer
@@ -346,7 +430,6 @@
     queryResourceRelByKeyId,
     filesUpload,
   } from '@/api/personalCenter'
-  import VueTemplateDemo from '@/views/personalCenter/VueTemplateDemo.vue'
   import { useRouter } from 'vue-router'
   const router = useRouter()
   const abilityToType = router.currentRoute.value.query.abilityToType
@@ -813,22 +896,22 @@
 <style></style>
 <style lang="less" scoped>
   .put-on-the-shelf {
-    height: 680px;
+    height: 6.8rem;
     overflow: scroll;
     display: flex;
     flex-direction: column;
     align-items: center;
-    padding: 50px 100px 25px;
+    padding: 0.5rem 1rem 0.25rem;
     .Technical-text {
-      height: 30px;
-      width: 100px;
-      border: 1px solid #bbd3ef;
-      border-radius: 6px;
+      height: 0.3rem;
+      width: 1rem;
+      border: 0.01rem solid #bbd3ef;
+      border-radius: 0.06rem;
       background: #edf4fc;
       color: #0087ff;
-      font-size: 14px;
+      font-size: 0.14rem;
       text-align: center;
-      line-height: 30px;
+      line-height: 0.3rem;
     }
     .Technical-text:hover {
       cursor: pointer;
@@ -836,41 +919,41 @@
 
     & > div {
       width: 100%;
-      margin-top: 60px;
+      margin-top: 0.6rem;
 
       .top {
         color: #333333;
-        font-size: 22px;
+        font-size: 0.22rem;
         display: flex;
         justify-content: center;
         align-items: center;
-        margin-bottom: 25px;
+        margin-bottom: 0.25rem;
 
         div:first-child,
         div:last-child {
-          width: 245px;
-          height: 1px;
+          width: 2.45rem;
+          height: 0.01rem;
           background: #f0f0f0;
         }
 
         div:nth-child(2) {
-          margin: 0 30px;
+          margin: 0 0.3rem;
         }
       }
 
       .bottom {
-        margin-top: 25px;
+        margin-top: 0.25rem;
 
         .items {
           background: #fafafa;
-          padding: 10px;
+          padding: 0.1rem;
 
           p {
             display: flex;
             justify-content: space-between;
 
             span:nth-of-type(1) {
-              width: 200px;
+              width: 2rem;
             }
 
             span:nth-of-type(2) {
@@ -880,87 +963,69 @@
           }
 
           p:nth-of-type(1) > span:nth-of-type(1) {
-            font-size: 18px;
+            font-size: 0.18rem;
             font-weight: 600;
           }
-
-          .del {
-            display: flex;
-            justify-content: flex-end;
-            align-items: center;
-
-            .delImg {
-              cursor: pointer;
-              display: inline-block;
-              width: 16px;
-              height: 18px;
-              background: url(~@/assets/home/sf_del.png) no-repeat;
-              margin-right: 5px;
-            }
-
-            div {
-              cursor: pointer;
-            }
-          }
         }
 
         .add {
-          margin-top: 10px;
-          font-size: 16px;
+          cursor: pointer;
+          margin-top: 0.1rem;
+          font-size: 0.16rem;
           color: #007efb;
         }
 
         .form {
-          margin-top: 20px;
+          margin-top: 0.2rem;
           display: flex;
           justify-content: flex-start;
           align-items: center;
 
           span:first-child {
-            width: 120px;
+            width: 1.2rem;
           }
 
           :deep(.ant-input-textarea) {
-            width: 520px;
+            width: 5.2rem;
           }
 
           :deep(.ant-radio-group) {
-            width: 520px;
+            width: 5.2rem;
           }
 
           :deep(.ant-input-number) {
-            width: 200px;
+            width: 2rem;
           }
 
           :deep(.ant-input) {
             resize: none;
-            width: 520px;
+            width: 5.2rem;
           }
 
           .ant-btn {
-            width: 160px;
-            height: 32px;
+            width: 1.6rem;
+            height: 0.32rem;
             text-align: center;
             background: #edf4fc;
             color: #0087ff;
-            border: 1px solid #bbd3ef;
-            border-radius: 6px;
+            border: 0.01rem solid #bbd3ef;
+            border-radius: 0.06rem;
           }
         }
 
         .submit {
-          margin-top: 40px;
+          margin-top: 0.4rem;
           display: flex;
           justify-content: flex-end;
 
           .ant-btn {
-            width: 80px;
-            height: 28px;
+            width: 1.8rem;
+            height: 0.3rem;
             text-align: center;
             background: #d9ebff;
             color: #0087ff;
-            border: 1px solid #0087ff;
-            border-radius: 6px;
+            border: 0.01rem solid #0087ff;
+            border-radius: 0.06rem;
           }
         }
       }
@@ -972,24 +1037,24 @@
   }
 
   .application-Area {
-    width: 520px;
+    width: 5.2rem;
     display: grid;
-    margin-top: -5px;
+    margin-top: -0.05rem;
     grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
 
     .application-Area-son {
       cursor: pointer;
-      font-size: 14px;
-      width: 90px;
-      height: 26px;
-      border-radius: 13px;
+      font-size: 0.14rem;
+      width: 0.9rem;
+      height: 0.26rem;
+      border-radius: 0.13rem;
       color: #333333;
       background: #f5f5f5;
-      border: 1px #cccccc solid;
+      border: 0.01rem #cccccc solid;
       display: flex;
       justify-content: center;
       align-items: center;
-      margin-top: 10px;
+      margin-top: 0.1rem;
       font-weight: 500;
     }
 
@@ -1006,27 +1071,27 @@
   }
 
   :deep(.ant-modal) {
-    width: 960px;
+    width: 9.6rem;
   }
 
   :deep(.ant-transfer-list) {
     width: 39.5%;
-    height: 520px;
+    height: 5.2rem;
   }
 
   :deep(.ant-transfer-operation) {
     flex-direction: row-reverse;
-    margin: 0 30px;
+    margin: 0 0.3rem;
   }
 
   :deep(.ant-btn) {
-    width: 56px;
-    height: 40px;
-    border-radius: 4px;
+    width: 0.56rem;
+    height: 0.4rem;
+    border-radius: 0.04rem;
   }
 
   :deep(.ant-btn:first-child) {
-    margin-left: 4px;
+    margin-left: 0.04rem;
   }
 
   :deep(.ant-modal-footer) {
@@ -1038,8 +1103,8 @@
   }
 
   :deep(.ant-modal-title) {
-    line-height: 24px;
-    font-size: 18px;
+    line-height: 0.24rem;
+    font-size: 0.18rem;
     color: #303133;
   }
 
@@ -1056,7 +1121,7 @@
   }
 
   :deep(.ant-transfer-list-header-title) {
-    font-size: 16px;
+    font-size: 0.16rem;
     color: #303133;
     font-weight: 400;
     text-align: left;
@@ -1065,6 +1130,27 @@
     display: none !important;
   }
   :deep(.ant-upload-list-item-name) {
-    width: 100px;
+    width: 1rem;
+  }
+
+  .del {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    font-size: 0.14rem;
+    margin-left: 0.2rem;
+
+    .delImg {
+      cursor: pointer;
+      display: inline-block;
+      width: 0.16rem;
+      height: 0.18rem;
+      background: url(~@/assets/home/sf_del.png) no-repeat;
+      margin-right: 0.05rem;
+    }
+
+    div {
+      cursor: pointer;
+    }
   }
 </style>