From 9161acb57c9b462bd169d637f815113b18aab610 Mon Sep 17 00:00:00 2001
From: gongjiale <942894820@qq.com>
Date: Fri, 11 Nov 2022 14:26:19 +0800
Subject: [PATCH] =?UTF-8?q?=E8=83=BD=E5=8A=9B=E4=B8=8A=E6=9E=B6=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/capacityOnTheShelf/Algorithm.vue    |  81 +++--
 .../components/PutOnTheShelf.vue              | 334 ++++++++++++------
 2 files changed, 271 insertions(+), 144 deletions(-)

diff --git a/front/src/views/capacityOnTheShelf/Algorithm.vue b/front/src/views/capacityOnTheShelf/Algorithm.vue
index 6a896068..1dc59bbb 100644
--- a/front/src/views/capacityOnTheShelf/Algorithm.vue
+++ b/front/src/views/capacityOnTheShelf/Algorithm.vue
@@ -98,7 +98,7 @@
         @confirm="changeSfys('上一步')"
         @cancel="cancel"
       >
-        <button>上一步</button>
+        <button  class="buzhou">上一步</button>
       </a-popconfirm>
       <button
         v-else-if="
@@ -107,6 +107,7 @@
             sfys[0].list.length
         "
         @click="changeSfys('上一步')"
+        class="buzhou"
       >
         上一步
       </button>
@@ -123,7 +124,7 @@
         @confirm="changeYycj('上一步')"
         @cancel="cancel"
       >
-        <button>上一步</button>
+        <button class="buzhou">上一步</button>
       </a-popconfirm>
       <button
         v-else-if="
@@ -132,10 +133,11 @@
             yycj[0].list.length
         "
         @click="changeYycj('上一步')"
+        class="buzhou"
       >
         上一步
       </button>
-      <button v-else-if="showView !== '基本信息'" @click="back()">
+      <button class="buzhou" v-else-if="showView !== '基本信息'" @click="back()">
         上一步
       </button>
       <a-popconfirm
@@ -152,9 +154,9 @@
         @confirm="changeBs('预览')"
         @cancel="cancel"
       >
-        <button>预览</button>
+        <button class="buzhou">预览</button>
       </a-popconfirm>
-      <button v-else-if="showView === '部署与使用'" @click="preview()">
+      <button v-else-if="showView === '部署与使用'" @click="preview()" class="buzhou">
         预览
       </button>
       <a-popconfirm
@@ -170,7 +172,7 @@
         @confirm="changeSfys('下一步')"
         @cancel="cancel"
       >
-        <button>下一步</button>
+        <button class="buzhou">下一步</button>
       </a-popconfirm>
       <button
         v-else-if="
@@ -179,6 +181,7 @@
             sfys[0].list.length
         "
         @click="changeSfys('下一步')"
+        class="buzhou"
       >
         下一步
       </button>
@@ -195,7 +198,7 @@
         @confirm="changeYycj('下一步')"
         @cancel="cancel"
       >
-        <button>下一步</button>
+        <button class="buzhou">下一步</button>
       </a-popconfirm>
       <button
         v-else-if="
@@ -204,10 +207,11 @@
             yycj[0].list.length
         "
         @click="changeYycj('下一步')"
+        class="buzhou"
       >
         下一步
       </button>
-      <button v-else-if="showView !== '部署与使用'" @click="next()">
+      <button class="buzhou" v-else-if="showView !== '部署与使用'" @click="next()">
         下一步
       </button>
       <a-popconfirm
@@ -224,12 +228,12 @@
         @confirm="changeBs('提交')"
         @cancel="cancel"
       >
-        <button>提交</button>
+        <button class="buzhou">提交</button>
       </a-popconfirm>
-      <button v-else-if="服务商联系电话 === '部署与使用'" @click="submit()">
+      <button class="buzhou" v-else-if="服务商联系电话 === '部署与使用'" @click="submit()">
         提交
       </button>
-       <button @click="close()">取消</button>
+       <button class="quxiao" @click="close()">取消</button>
     </div>
   </div>
 </template>
@@ -946,36 +950,47 @@ onBeforeUnmount(() => {
   }
   .btn {
     display: flex;
-    justify-content: space-between;
+    justify-content: center;
     padding: 0.1rem 3.5rem 0;
-    button {
-      cursor: pointer;
-      font-size: 0.14rem;
-      width: 0.8rem;
-      height: 0.35rem;
-      text-align: center;
-      color: #fff;
-      border: none;
-      border-radius: 0.06rem;
-      background: #0087ff;
+   //  button {
+      // cursor: pointer;
+      // font-size: 14px;
+      // text-align: center;
+      // color: #fff;
+      // border: none;
+      // border-radius: 0.06rem;
+      // background: #0087ff;
+      // margin-right:12px;
+    //  margin-right:12px;
+    .quxiao{
       margin-right:12px;
-    }
-    button:nth-of-type(1) {
-        background: #0058e1;
-      color:#ffffff;
+      cursor: pointer;
       width: 90px;
       height: 32px;
-      border-radius: 2px;
-      border: 1px #0058e1 solid;
-      }
-      button:nth-of-type(2) {
-        width: 90px;
-      height: 32px;
       background: #ffffff;
       color:#0058e1;
       border-radius: 2px;
       border: 1px #0058e1 solid;
-      }
+    }
+    // .quxiao:hover{
+    //   background: #0058e1;
+    //   color:#ffffff;   
+    // }
+    .buzhou{
+      margin-right:12px;
+      cursor: pointer;
+      background: #0058e1;
+      color:#ffffff;
+      width: 90px;
+      height: 32px;
+      border-radius: 2px;
+      border: 1px #0058e1 solid;
+  }
+  // .buzhou:hover{  
+  //     background: #ffffff;
+  //     color:#0058e1;  
+  // }
+    
   }
   .first {
     justify-content: center;
diff --git a/front/src/views/capacityOnTheShelf/components/PutOnTheShelf.vue b/front/src/views/capacityOnTheShelf/components/PutOnTheShelf.vue
index 1ae9e7e4..370ea9d9 100644
--- a/front/src/views/capacityOnTheShelf/components/PutOnTheShelf.vue
+++ b/front/src/views/capacityOnTheShelf/components/PutOnTheShelf.vue
@@ -19,7 +19,7 @@
             v-for="(val, index) in data[title.name]"
             :key="'key1' + val.name + index"
           >
-            <div
+            <!-- <div
               style="
                 font-size: 0.18rem;
                 font-weight: 600;
@@ -39,6 +39,28 @@
                   <div>删除</div>
                 </div>
               </a-popconfirm>
+            </div> -->
+            <div
+              style="
+                  font-size: 16px;
+                 display: flex;
+                float: right;
+                top:0px;
+                margin-right: 28px;
+              "
+            >
+              <!-- <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"
@@ -47,8 +69,10 @@
               )[0].list"
               :key="'key2' + attr.name + index2"
             >
-              <span>{{ attr.name }} : </span>
+            
+            <span ><front style="color:#e83a48"> *</front>{{ attr.name }}:</span>
               <a-input
+              style="width:280px"
                 disabled
                 v-model:value="val[attr.field]"
                 :maxlength="24"
@@ -57,33 +81,44 @@
               />
               <template v-if="attr.type == 'input2'">
                 <a-input
-                  disabled
+                style="width:280px"
+                   disabled
                   :maxLength="1000"
                   v-model:value="val[attr.field]"
                   :placeholder="'请填写' + attr.name"
                 />
               </template>
-              <a-textarea
+              <template v-else-if="attr.type == 'textArea'">
+              <a-input
+                style="width:1120px"
                 disabled
+                v-model:value="val[attr.field]"
+                :maxlength="1000"
+                :placeholder="'请填写' + attr.name + ',不超过1000个字符'"
+               
+              />
+            </template>
+              <!-- <a-textarea
+              disabled
                 v-model:value="val[attr.field]"
                 :showCount="true"
                 :maxlength="1000"
                 :placeholder="'请填写' + attr.name"
                 v-else-if="attr.type == 'textArea'"
-              />
+              /> -->
               <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>
-             
             </div>
+            <div style="margin-top:24px;height:1px;border-top: 1px dashed #dddee1; width: 1240px;font-size: 18px;"></div>
           </div>
-          
-          <div style="font-size: 0.18rem; font-weight: 600">
+      
+          <!-- <div style="font-size: 0.18rem; font-weight: 600border-top: 1px dashed grey; width: 1240px;font-size: 18px;">
             <span>{{ title.name }}-{{ data[title.name].length + 1 }}</span>
-          </div>
+          </div> -->
           <div
             class="form"
             v-for="(val, index) in props.configure.filter(
@@ -91,8 +126,9 @@
             )[0].list"
             :key="'key3' + val.name + index"
           >
-            <span>{{ val.name }}:</span>
+          <span ><front style="color:#e83a48"> *</front>{{ val.name }}:</span>
             <a-input
+            style="width:280px"
               v-model:value="val.note1"
               :maxlength="24"
               :placeholder="'请填写' + val.name + ',不超过24个字符'"
@@ -100,6 +136,7 @@
             />
             <template v-if="val.type == 'input2'">
               <a-input
+                style="width:280px"
                 :maxLength="1000"
                 v-model:value="val.note1"
                 :placeholder="'请填写' + val.name"
@@ -118,13 +155,23 @@
                 }}
               </span>
             </template>
-            <a-textarea
+            <template  v-else-if="val.type == 'textArea'">
+              <a-input
+                style="width:1120px"
+                :showCount="true"
+                v-model:value="val.note1"
+                :maxlength="1000"
+                :placeholder="'请填写' + val.name + ',不超过1000个字符'"
+           
+              />
+            </template>
+            <!-- <a-textarea
               v-model:value="val.note1"
               :showCount="true"
               :maxlength="1000"
               :placeholder="'请填写' + val.name"
               v-else-if="val.type == 'textArea'"
-            />
+            /> -->
             <a-input-number
               v-model:value="val.note1"
               :min="0"
@@ -134,12 +181,31 @@
               :placeholder="'请填写' + val.name"
               v-else-if="val.type == 'number'"
             />
-            <a-radio-group
+            <!-- <a-radio-group
               v-model:value="val.note1"
               :options="val.options"
               @change="radioChange"
               v-else-if="val.type == 'radio'"
-            />
+            /> -->
+            <div
+            v-else-if="val.type == 'radio'"
+                class="danxuan-Area"
+                id="danxuan-Area"
+              >
+                <div
+                  v-for="itemSelect in val.options"
+                  :key="itemSelect"
+                  class="danxuan-Area-son"
+                  @click="radioChangeNew(val, itemSelect)"
+                  :class="
+                    val.note1 && val.note1=== itemSelect
+                      ? 'danxuan-Area-down'
+                      : ''
+                  "
+                >
+                  {{ itemSelect }}
+                </div>
+              </div>
             <upload
               :key="showKey"
               type="图片"
@@ -151,9 +217,15 @@
               v-else-if="val.type == 'image'"
             ></upload>
           </div>
+          <div style="margin-top:24px;height:1px;border-top: 1px dashed #dddee1; width: 1240px;font-size: 18px;"></div>
           <div class="submit">
             <a-button type="primary" @click="add(title.name)">
-              添加更多{{ title.name }}
+              <img
+                style="height: 12px; width: 12px;margin-top: -2px;"
+                src="../../../assets/home/zhengjia.png"
+                alt=""
+              />
+              <span style="margin-left: 4px">添加多个{{ title.name }}</span>
             </a-button>
           </div>
         </div>
@@ -201,12 +273,33 @@
                 :placeholder="'请输入' + item.name + '，不超过50个字符'"
                 @change="changeIiem(item.name, item.note1)"
               />
-              <a-radio-group
+              <!-- <a-radio-group
                 v-else-if="item.type == 'radio'"
                 v-model:value="item.note1"
                 :options="item.options"
                 @change="changeIiem(item.name, item.note1)"
-              />
+              /> -->  
+              <!-- 接口请求方式  单选框样式改变 -->
+              <!-- <div  v-else-if="item.type == 'radio'">ddd </div> -->
+              <div
+              v-else-if="item.type == 'radio'"
+                class="danxuan-Area"
+                id="danxuan-Area"
+              >
+                <div
+                  v-for="itemSelect in item.options"
+                  :key="itemSelect"
+                  class="danxuan-Area-son"
+                  @click="danxuanRadio(item, itemSelect)"
+                  :class="
+                    item.note1 && item.note1 === itemSelect
+                      ? 'danxuan-Area-down'
+                      : ''
+                  "
+                >
+                  {{ itemSelect }}
+                </div>
+              </div>
               <!-- <a-input
                 v-else-if="item.type == 'AbilityType'"
                 :maxLength="1000"
@@ -312,8 +405,9 @@
                   <VueTemplateDemo :dataFrom="props.dataFrom"></VueTemplateDemo>
                 </div>
               </div>
-              
-              <!-- <upload
+
+
+              <upload
                 v-else-if="item.type == 'video'"
                 type="视频"
                 btnName="请上传视频"
@@ -321,19 +415,7 @@
                 :data="item"
                 :list="props.videoList"
                 tip="支持视频类型，大小不超过100M"
-              >
-           
-            </upload> -->
-
-        <upload v-else-if="item.type == 'video'"
-         type="视频"
-                btnName="请上传视频"
-                :maxCount="1"
-                :data="item"
-                :list="props.videoList"
-                tip="支持视频类型，大小不超过100M">
-        </upload>
-   
+              ></upload>
 
               <!-- <a-button
               v-else-if="item.type == 'AssociatedApplication'"
@@ -619,6 +701,19 @@ const numType = ref('一次性买断')
 const radioChange = (e) => {
   numType.value = e.target.value
 }
+const radioChangeNew = (item,itemSelect) => {
+  if (item.note1) {
+    if (item.note1 === itemSelect) {
+      item.note1 = null
+    } else {
+      item.note1 = itemSelect
+    }
+  } else {
+    item.note1 = itemSelect
+  }
+
+  numType.value =itemSelect
+}
 const changeIiem = (name, value) => {
   if (value && value !== '' && changeField.value.indexOf(name) == -1) {
     changeField.value.push(name)
@@ -886,19 +981,31 @@ const ApplicationArea = (item, itemson) => {
   })
 }
 const danxuanArea = (item, itemSelect, indexSelect) => {
-
-  if(item.note1){
- if(item.note1===indexSelect){
-  item.note1= null
- }else{
- item.note1=indexSelect
- }
-  }else{
+  if (item.note1) {
+    if (item.note1 === indexSelect) {
+      item.note1 = null
+    } else {
+      item.note1 = indexSelect
+    }
+  } else {
     item.note1 = indexSelect
   }
-  
+
   changeIiem(itemSelect, indexSelect)
 }
+const danxuanRadio= (item, itemSelect) => {
+  if (item.note1) {
+    if (item.note1 === itemSelect) {
+      item.note1 = null
+    } else {
+      item.note1 = itemSelect
+    }
+  } else {
+    item.note1 = itemSelect
+  }
+
+  changeIiem(item.name, item.note1)
+}
 // 来源应用
 const visibleAssociatedApplication = ref(false)
 const visibleAssociatedApplicationOther = ref(false)
@@ -1099,47 +1206,44 @@ const applicationsOption = (input, option) => {
 </script>
 <style></style>
 <style lang="less" scoped>
-
 :deep(.upload-list-inline .ant-upload .ant-btn) {
-    height: 150px;
-    width: 218px;
-    border: 1px solid rgba(198,198,198,0.5);
-    border-radius: 2px; 
-    background: rgba(0,88,225,0.05);
-    color: #0087ff;
-    font-size: 14px;
+  height: 150px;
+  width: 218px;
+  border: 1px solid rgba(198, 198, 198, 0.5);
+  border-radius: 2px;
+  background: rgba(0, 88, 225, 0.05);
+  color: #0087ff;
+  font-size: 14px;
 }
 
-:deep(.upload-list-inline .ant-upload .ant-btn > span){
-    background:url('~@/assets/home/yuanjia.png') no-repeat ;
-    color: #666666;
-    background-position: center;
-    text-align: center;
-    line-height: 120px;
-    height: 50px;
+:deep(.upload-list-inline .ant-upload .ant-btn > span) {
+  background: url('~@/assets/home/yuanjia.png') no-repeat;
+  color: #666666;
+  background-position: center;
+  text-align: center;
+  line-height: 120px;
+  height: 50px;
 }
- // 箭头大小以及位置
- :deep(.ant-select-arrow) {
-  background:url('~@/assets/home/huixia.png') no-repeat ;
+// 箭头大小以及位置
+:deep(.ant-select-arrow) {
+  background: url('~@/assets/home/huixia.png') no-repeat;
   cursor: pointer;
-    margin-top: -4px;
-    margin-right: -4px;
-  }
-
-  // 隐藏三角
-  :deep(.ant-select-arrow .anticon){
-    vertical-align: top;
-    transition: transform 0.3s;
-    display: none;
-  } 
-  // :deep(.ant-select-arrow :focus) {
-  //   background:url('~@/assets/home/huishang.png') no-repeat ;
-  // cursor: pointer;
-  //   margin-top: -4px;
-  //   margin-right: -4px;
-  // }
-
+  margin-top: -4px;
+  margin-right: -4px;
+}
 
+// 隐藏三角
+:deep(.ant-select-arrow .anticon) {
+  vertical-align: top;
+  transition: transform 0.3s;
+  display: none;
+}
+// :deep(.ant-select-arrow :focus) {
+//   background:url('~@/assets/home/huishang.png') no-repeat ;
+// cursor: pointer;
+//   margin-top: -4px;
+//   margin-right: -4px;
+// }
 
 .put-on-the-shelf {
   margin: 0.15rem 2rem;
@@ -1224,17 +1328,18 @@ const applicationsOption = (input, option) => {
       }
 
       .form {
-        margin-top: 0.2rem;
+        min-height: 32px;
+        margin-top: 24px;
         display: flex;
         justify-content: flex-start;
         align-items: center;
 
         span:first-child {
-          width: 1.2rem;
+          width: 1.0rem;
         }
 
         :deep(.ant-input-textarea) {
-          width: 5.2rem;
+          width: 1000px;
         }
 
         :deep(.ant-radio-group) {
@@ -1265,16 +1370,27 @@ const applicationsOption = (input, option) => {
         margin-top: 0.4rem;
         font-size: 0.14rem;
         display: flex;
-        justify-content: flex-end;
+        justify-content: center;
 
         .ant-btn {
-          width: 1.8rem;
-          height: 0.3rem;
+          width: 260px;
+          height: 32px;
           text-align: center;
-          background: #d9ebff;
-          color: #0087ff;
-          border: 0.01rem solid #0087ff;
-          border-radius: 0.06rem;
+          background: #fff;
+          color: #0558e1;
+          border: 1px solid #0558e1;
+          border-radius: 2px;
+          font-size: 14px;
+        }
+        .ant-btn:hover{
+          background: #fff;
+          color: #0558e1;
+          opacity: 0.8;
+        }
+        .ant-btn:active{
+          background: #fff;
+          color: #0558e1;
+          opacity: 0.8
         }
       }
     }
@@ -1308,7 +1424,6 @@ const applicationsOption = (input, option) => {
     background: #0558e1;
   }
 
-
   .danxuan-Area-down {
     background: #0058e1;
     color: #fff;
@@ -1462,7 +1577,6 @@ const applicationsOption = (input, option) => {
     width: unset;
   }
   .box {
-  
     display: flex;
     align-items: center;
     min-height: 32px;
@@ -1478,33 +1592,31 @@ const applicationsOption = (input, option) => {
       color: #e83e48;
       margin-left: -6px;
     }
-    
   }
 
- :deep(.the-new-release .box .first){
-      justify-content: center !important;
+  :deep(.the-new-release .box .first) {
+    justify-content: center !important;
 
-    
-      padding: 10px 350px 0;
-      button {
-        cursor: pointer;
-        width: 80px;
-        height: 35px;
-        text-align: center;
-        color: #fff;
-        border: none;
-        border-radius: 6px;
-        background: yellow;
-      }
-      button:nth-of-type(1) {
-        color:red;
-        background: #e1edfa;
-      }
-      button:nth-of-type(2) {
-        background: yellow;
-      }
+    padding: 10px 350px 0;
+    button {
+      cursor: pointer;
+      width: 80px;
+      height: 35px;
+      text-align: center;
+      color: #fff;
+      border: none;
+      border-radius: 6px;
+      background: yellow;
     }
-  
+    button:nth-of-type(1) {
+      color: red;
+      background: #e1edfa;
+    }
+    button:nth-of-type(2) {
+      background: yellow;
+    }
+  }
+
   .requiredTips {
     font-size: 14px;
     color: #e83e48;