02201711

src/components/MarketplacePick.vue

@@ -1,13 +1,22 @@
 <template>
     <div class="marketplacepick-all">
         <div class="marketplacepick-form">
+            <div class="addbox">
+                <div class="addbox-title">表单收集</div>
+                <div @click="additionsj" class="addbox-img"><img src="../assets/shoujitianjia.png" /></div>
+            </div>
             <div class="marketplacepick-form-head">
-                <el-select @change="GroupOrderPreInfochange" style="width: 357px;margin-bottom: 10px;" v-model="tempId" clearable placeholder="请选择">
+                <el-select @change="GroupOrderPreInfochange" style="width: 357px;margin-bottom: 10px;" v-model="tempId"
+                    clearable placeholder="请选择">
                     <el-option v-for="item in tempDatas" :key="item.id" :label="item.name" :value="item.id">
                     </el-option>
                 </el-select>
-                <el-select @change="GroupOrderPreInfochange" style="width: 357px;margin-bottom: 10px;" v-model="formid" clearable placeholder="请选择">
-                    <el-option v-for="item in names" :key="item.id" :label="item.name" :value="item.id">
+                <el-autocomplete style="width: 357px;margin-bottom: 10px;" popper-class="el-autocomplete-suggestion" :popper-append-to-body="false" class="inline-input"
+                    size="medium" v-model.trim="formname" :fetch-suggestions="querySearch"
+                    @select="formnameselect">
+                </el-autocomplete>
+                <el-select style="width: 357px;margin-bottom: 10px;" v-model="groupId" clearable placeholder="请选择">
+                    <el-option v-for="item in groupNames" :key="item.id" :label="item.groupName" :value="item.id">
                     </el-option>
                 </el-select>
             </div>
@@ -46,10 +55,9 @@
                         </el-form-item>
                     </div>
                 </div>
-                <!-- <el-form-item>
-                    <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
-                    <el-button @click="resetForm('ruleForm')">重置</el-button>
-                </el-form-item> -->
+                <div style="text-align: right;">
+                    <el-button @click="GroupOrderPreInfoSave" type="primary">保存</el-button>
+                </div>
             </el-form>
         </div>
     </div>
@@ -92,13 +100,16 @@ export default {
                     { required: true, message: '请填写活动形式', trigger: 'blur' }
                 ]
             },
-            formid:1,
+            formid:'',
+            formname:'',
             tempId:1404,
             controlarr:[],
             tempDatas:[],
             countryarr:[],
             cityarr:[],
-            names:[]
+            names:[],
+            groupId:'',
+            groupNames:[],
         }
     },
     methods:{
@@ -123,12 +134,20 @@ export default {
                 method: 'get',
                 url: url,
             }).then(function (res) {
+                var basicsdata=res.data.data
                 if (res.data.code==200) {
-                    var basicsdata=res.data.data
                     that.tempDatas=basicsdata.tempDatas;
                     that.tempId=that.tempDatas[0].id;
-                    that.names=basicsdata.names;
+                    that.names = basicsdata.names.map((terminal) => {
+                        return {
+                            id:terminal.id,
+                            value: terminal.name,
+                        };
+                    });
+                    // that.names=basicsdata.names;
                     that.formid=that.names[0].id;
+                    that.formname=that.names[0].value;
+                    that.groupNames=basicsdata.groupNames.data;
 
                     that.GroupOrderPreInfo();
                 }else{
@@ -144,8 +163,8 @@ export default {
                 method: 'get',
                 url: url,
             }).then(function (res) {
+                var countryarr=res.data.data;
                 if (res.data.code==200) {
-                    var countryarr=res.data.data;
                     that.countryarr = countryarr.map((terminal) => {
                         return {
                             value: terminal,
@@ -177,12 +196,17 @@ export default {
                 }
             })
         },
+        //xj
+        additionsj(){
+            this.formname='',
+            this.formid=0;
+            this.groupId='';
+            this.GroupOrderPreInfo();
+        },
         querySearch(queryString, cb) {
-            var restaurants = this.countryarr;
+            var restaurants = this.names;
             var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
             // 调用 callback 返回建议列表的数据
-            console.log(cb);
-            
             cb(results);
         },
         createFilter(queryString) {
@@ -191,6 +215,10 @@ export default {
                 return restaurant.value.replace("  ", "").toLowerCase().match(queryStrings[queryStrings.length-1].toLowerCase());
             };
         },
+        formnameselect(val){
+            this.formid=val.id;
+            this.GroupOrderPreInfo();
+        },
         PromptChecked(val){
             console.log(val);
             var gjval='';
@@ -223,7 +251,6 @@ export default {
         },
         //获取表单
         GroupOrderPreInfo() {
-            this.controlarr=[];
             var url = "/api/Groups/GroupOrderPreInfo/"+this.formid+"/"+this.tempId
             var that = this
             this.$axios({
@@ -232,6 +259,38 @@ export default {
             }).then(function (res) {
                 if (res.data.code==200) {
                     that.controlarr=res.data.data.items;
+                    that.groupId=res.data.data.groupId==0?'':res.data.data.groupId;
+                }else{
+                    that.$message.error(res.data.msg);
+                }
+            })
+        },
+        //baocun
+        GroupOrderPreInfoSave() {
+            if(this.formname==''){
+                return this.$message.error('表单名称没填！');
+            }
+            var url = "/api/Groups/GroupOrderPreInfoSave"
+            var that = this
+            this.$axios({
+                method: 'post',
+                url: url,
+                headers: {
+                    Authorization: 'Bearer '
+                },
+                data: {
+                    id: that.formid,
+                    name: that.formname,
+                    groupId: that.groupId==''?0:that.groupId,
+                    items: that.controlarr,
+                    currUserId: 208,
+                }
+            }).then(function (res) {
+                if (res.data.code==200) {
+                    that.$message({
+                        type: 'success',
+                        message: res.data.msg
+                    });
                 }else{
                     that.$message.error(res.data.msg);
                 }
@@ -250,9 +309,14 @@ export default {
 }
 </script>
 <style>
-.marketplacepick-form{
-    max-width: 1200px;
+.marketplacepick-all{
     min-width: 375px;
+    display: flex;
+    justify-content: center;
+}
+.marketplacepick-form{
+    max-width: 1101px;
+    min-width: 360px;
 }
 .marketplacepick-form-head,.marketplacepick-form .el-select{
     width: 100%;
@@ -276,6 +340,12 @@ export default {
 .marketplacepick-form-li .el-autocomplete{
     width: 100%;
 }
+.addbox{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 15px;
+}
 .marketplacepick-form-li .el-input--medium .el-input__inner{
     height: 40px;
     line-height: 40px;
@@ -287,12 +357,40 @@ export default {
 .marketplacepick-form-li .el-form-item__label{
     float: none;
 }
-@media screen and (min-width: 376px) {
+.marketplacepick-form-head{
+    display: flex;
+    flex-wrap: wrap;
+}
+.marketplacepick-form-head .el-input--medium .el-input__inner{
+    height: 40px;
+    line-height: 40px;
+}
+.addbox-img{
+    width: 25px;
+    height: 25px;
+    margin-right: 5px;
+}
+.addbox-title{
+    font-size: 17px;
+    font-weight: 600;
+}
+.addbox-img img{
+    width: 100%;
+}
+@media screen and (max-width: 375px){
+    .marketplacepick-form{
+        width: 360px;
+    }
+}
+@media screen and (min-width: 725px) {
     .marketplacepick-form-li{
         margin-right: 10px;
     }
     .marketplacepick-form-head .el-select{
         margin-right: 10px;
     }
+    .marketplacepick-form-head .el-autocomplete{
+        margin-right: 10px;
+    }
 }
 </style>