页面修改

src/components/duty/addDutyItem.vue

@@ -12,14 +12,15 @@
           </div>
           <div class="col-6">
             <q-select stack-label color="primary" filled clearable label="选择事项类型" option-value="Id" option-label="Name"
-              :options="itemTypeOptions" v-model="msg.ItemType" ref="ItemType" emit-value map-options :rules="[val => !!val || '请选择事项类型']" />
+              :options="itemTypeOptions" v-model="msg.ItemType" ref="ItemType" emit-value map-options
+              :rules="[val => !!val || '请选择事项类型']" />
           </div>
         </div>
         <div class="row wrap">
           <div class="col-6">
             <q-select stack-label v-model="FrequencyArr" multiple :options="frequencyOptions" color="primary" filled
-               label="选择班次" option-label="Name" option-value="Id" ref="Shifts"
-              @input="getSchoolListByFrequencyIds" emit-value map-options :rules="[val => !!val || '请选择班次']" class="col-6 q-pr-lg q-pb-lg" />
+              label="选择班次" option-label="Name" option-value="Id" ref="Shifts" @input="getSchoolListByFrequencyIds"
+              emit-value map-options :rules="[val => !!val || '请选择班次']" class="col-6 q-pr-lg q-pb-lg" />
           </div>
           <div class="col-6">
             <q-select stack-label v-model="schoolArr" multiple :options="schoolOptions" color="primary" filled
@@ -27,6 +28,17 @@
               @input="getDutyFrequencyBySchoolIds" emit-value map-options :rules="[val => !!val || '请选择校区']" />
           </div>
         </div>
+        <div class="row wrap" style="display:none;">
+          <div class="col-6">
+            <template v-if="msg.ItemImgList&&msg.ItemImgList.length>0" v-for="(item,index) in msg.ItemImgList">
+              <q-img :src="item" spinner-color="white" style="height: 140px; max-width: 150px" />
+            </template>
+            <q-uploader :style="{ backgroundImage: 'url(' + BasicImg + ')' }"
+              style="width:auto;height:200px;background-repeat:no-repeat;background-size:cover;" flat hide-upload-btn
+              max-files="1" label="示例图片" accept=".jpg, image/*" :factory="uploadFile" auto-upload>
+            </q-uploader>
+          </div>
+        </div>
       </q-card-section>
       <q-card-actions align="right" class="bg-white">
         <q-btn label="取消" flat color="grey-10" style="font-weight:400 !important" @click="closeRuleForm" />
@@ -48,6 +60,10 @@
   import {
     getSchoolDropdown
   } from '../../api/school/index'; //获取校区列表
+  import {
+    UploadSelfFile
+  } from "../../api/common/common"; //上传图片
+
   export default {
     props: {
       saveObj: {
@@ -65,8 +81,10 @@
           ItemName: "",
           ItemSchools: "",
           ItemType: 0,
-          Shifts: ""
+          Shifts: "",
+          ItemImgList: [],
         },
+        BasicImg: "",
         persistent: true,
         schoolOptions: [],
         frequencyOptions: [],
@@ -83,6 +101,15 @@
       this.initObj();
     },
     methods: {
+      uploadFile(files) {
+        UploadSelfFile("course", files[0], res => {
+          if (res.Code == 1) {
+            this.BgImg = res.FileUrl;
+            this.msg.ItemImgList.push(res.FileUrl);
+            this.BgImg = "";
+          }
+        });
+      },
       initObj() {
         if (this.saveObj && this.saveObj.Id > 0) {
           queryDutyItemInfo({
@@ -96,6 +123,7 @@
                 this.msg.ItemSchools = tempData.ItemSchools;
                 this.msg.ItemType = tempData.ItemType;
                 this.msg.Shifts = tempData.Shifts;
+                this.msg.ItemImgList = tempData.ItemImgList;
                 if (tempData.ShiftList && tempData.ShiftList.length > 0) {
                   this.FrequencyArr = tempData.ShiftList.map(i => i * 1);
                 }
@@ -124,6 +152,8 @@
         this.msg.ItemSchools = "";
         this.msg.ItemType = "";
         this.msg.Shifts = "";
+        this.msg.ItemImgList = [];
+        this.BgImg = "";
       },
       //保存信息
       saveRule() {
@@ -136,7 +166,7 @@
           !this.$refs.Shifts.hasError &&
           !this.$refs.ItemSchools.hasError) {
           this.msg.ItemSchools = this.schoolArr.toString();
-          this.msg.Shifts=this.FrequencyArr.toString();
+          this.msg.Shifts = this.FrequencyArr.toString();
           saveDutyItem(this.msg).then(res => {
             if (res.Code == 1) {
               this.clearMsg();
@@ -158,7 +188,7 @@
           Shifts: Shifts
         }).then((res) => {
           this.schoolOptions = res.Data;
-          this.schoolArr=[];
+          this.schoolArr = [];
         })
       },
       //根据学校id获取对应的班次