样式调整

src/views/business/exchange/addCode.vue

@@ -3,23 +3,31 @@
     <el-divider content-position="left">基础信息</el-divider>
     <el-form ref="addItem" :rules="rules" :model="addData" label-width="120px">
       <el-row :gutter="10">
-        <el-form-item label="兑换码名称:" prop="title">
-          <el-input v-model="addData.title" placeholder="请输入兑换码名称" :disabled="id?true:false" style="width: 240px;" />
-        </el-form-item>
-        <el-form-item label="门店:" prop="channelId">
-          <el-select v-model="addData.channelId" placeholder="请选择门店" :disabled="id?true:false" style="width: 240px;" filterable :filter-method="dataFilter">
-            <el-option v-for="(item) in siteList" :key="item.channelId" :label="item.name" :value="item.channelId">
-              <div>
-                <span style="float: left;">{{item.name}} </span>
-                <span style="float: right;">{{item.mobile}}</span>
-              </div>
-            </el-option>
-          </el-select>
-        </el-form-item>
+        <el-row :gutter="10">
+          <el-col :span="7">
+            <el-form-item label="兑换码名称:" prop="title">
+              <el-input v-model="addData.title" placeholder="请输入兑换码名称" :disabled="id?true:false" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="10">
+          <el-col :span="7">
+            <el-form-item label="门店:" prop="channelId">
+              <el-select v-model="addData.channelId" placeholder="请选择门店" style="width: 100%;" :disabled="id?true:false" filterable :filter-method="dataFilter">
+                <el-option v-for="(item) in siteList" :key="item.channelId" :label="item.name" :value="item.channelId">
+                  <div>
+                    <span style="float: left;">{{item.name}} </span>
+                    <span style="float: right;">{{item.mobile}}</span>
+                  </div>
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
         <el-row :gutter="10">
           <el-col :span="7">
             <el-form-item label="兑换码数量:" prop="quantity">
-              <el-input v-model="addData.quantity" placeholder="请输入兑换码数量" :disabled="id?true:false" style="width: 240px;" />
+              <el-input v-model="addData.quantity" placeholder="请输入兑换码数量" :disabled="id?true:false" />
             </el-form-item>
           </el-col>
           <el-col :span="6" v-if="id?true:false">
@@ -27,16 +35,18 @@
               查看
             </div>
           </el-col>
-          
         </el-row>
-        
-        <el-form-item label="有效期:" prop="validityPeriod">
-          <el-select v-model="addData.validityPeriod" placeholder="请选择有效期" :disabled="id?true:false" style="width: 240px;">
-            <el-option label="三个月" value="threeMoths"></el-option>
-            <el-option label="六个月" value="sixMonths"></el-option>
-            <el-option label="永久" value="forever"></el-option>
-          </el-select>
-        </el-form-item>
+        <el-row :gutter="10">
+          <el-col :span="7">
+            <el-form-item label="有效期:" prop="validityPeriod">
+              <el-select v-model="addData.validityPeriod" placeholder="请选择有效期" style="width: 100%;" :disabled="id?true:false">
+                <el-option label="三个月" value="threeMoths"></el-option>
+                <el-option label="六个月" value="sixMonths"></el-option>
+                <el-option label="永久" value="forever"></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
       </el-row>
       <el-divider content-position="left">商品设置</el-divider>
       <el-row :gutter="10">
@@ -65,8 +75,8 @@
     <!-- 添加盲豆 -->
     <coin-add :dialog-visible="coinTableVisible" @close="close" @confirmCoin="confirmCoin" v-if="coinTableVisible" />
 
-     <!--  查询兑换码 -->
-     <exchange-code-list v-if="exchangeCodeShow" @cancel="exchangeCodeShow = false" :exchangeCodeShow="exchangeCodeShow" :id="id"/>
+    <!--  查询兑换码 -->
+    <exchange-code-list v-if="exchangeCodeShow" @cancel="exchangeCodeShow = false" :exchangeCodeShow="exchangeCodeShow" :id="id" />
   </div>
 </template>
 
@@ -110,7 +120,7 @@ export default {
         validityPeriod: [{ required: true, message: '请选择有效期', trigger: 'blur' }],
         quantity: [
           { required: true, message: "请输入兑换码", trigger: ["blur", "change"] },
-          { pattern: /^[1-9]\d*$/, message: "请输入正确的数字", trigger: ["blur", "change"]}]
+          { pattern: /^[1-9]\d*$/, message: "请输入正确的数字", trigger: ["blur", "change"] }]
       },
       // 列表
       goodsList: [],
@@ -217,7 +227,7 @@ export default {
             }
           });
 
-          const { channelId, quantity, siteName, validityPeriod,title } = this.addData
+          const { channelId, quantity, siteName, validityPeriod, title } = this.addData
           goodsExchangeCreate({
             channelId,
             quantity,