页面修改

src/components/duty/addDutyItem.vue

 <style>
-  .addDutyUpload .ItemImgDiv{
-    width:118px;
-    height:118px;
+  .addDutyUpload .ItemImgDiv {
+    width: 118px;
+    height: 118px;
     position: relative;
-    margin:0 10px 10px 0;
-    display:inline-block;
+    margin: 0 10px 10px 0;
+    display: inline-block;
   }
+
   .addDutyUpload .avatar-uploader .el-upload {
     border-radius: 6px;
     cursor: pointer;
-    width:100%;
-    height:100%;
-    color:#8c939d;
+    width: 100%;
+    height: 100%;
+    color: #8c939d;
     position: relative;
     overflow: hidden;
   }
-  .addDutyMain{
-    display:inline-block;
-    width:118px;
-    height:118px;
-    font-size:70px;
+
+  .addDutyMain {
+    display: inline-block;
+    width: 118px;
+    height: 118px;
+    font-size: 70px;
     border: 1px dashed #d9d9d9;
-    line-height:120px;
+    line-height: 120px;
   }
+
 </style>
 <template>
   <q-dialog v-model="persistent" content-class="bg-grey-1" transition-show="scale" transition-hide="scale">
@@ -31,17 +34,7 @@
         <div class="text-h6">{{(saveObj&&saveObj.Id>0)?"修改值班事项":"新增值班事项"}}</div>
       </q-card-section>
       <q-card-section class="q-pt-none scroll" style="max-height: 70vh">
-        <div class="row wrap">
-          <div class="col-6">
-            <q-input filled stack-label max-length="20" :dense="false" v-model="msg.ItemName" ref="ItemName"
-              class="col-6 q-pr-lg q-pb-lg" label="事项名称" :rules="[val => !!val || '请填写事项名称']" />
-          </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 || '请选择事项类型']" />
-          </div>
-        </div>
+
         <div class="row wrap">
           <div class="col-6">
             <q-select stack-label v-model="FrequencyArr" multiple :options="frequencyOptions" color="primary" filled
@@ -54,31 +47,45 @@
               @input="getDutyFrequencyBySchoolIds" emit-value map-options :rules="[val => !!val || '请选择校区']" />
           </div>
         </div>
+        <div class="row wrap">
+          <div class="col-6">
+            <q-select stack-label v-model="msg.DutyCategory" :options="dutyCategoryList" color="primary" filled
+              label="分类" option-label="Name" option-value="Id" ref="DutyCategory" 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="msg.DutyType" :options="dutyTypeList" color="primary" filled label="类型"
+              option-label="Name" option-value="Id" ref="DutyType"  emit-value
+              map-options :rules="[val => !!val || '请选择类型']" />
+          </div>
+        </div>
+        <div class="row wrap">
+          <div class="col-6">
+            <q-input filled stack-label max-length="20" :dense="false" v-model="msg.ItemName" ref="ItemName"
+              class="col-6 q-pr-lg q-pb-lg" label="事项名称" :rules="[val => !!val || '请填写事项名称']" />
+          </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 || '请选择事项类型']" />
+          </div>
+        </div>
         <div class="row wrap addDutyUpload">
           <div class="col-12">
             <div style="display:flex;flex-wrap: wrap;">
               <div v-if="msg.ItemImgList&&msg.ItemImgList.length>0" v-for="(item,index) in msg.ItemImgList">
                 <div class="ItemImgDiv">
                   <q-img :src="item" spinner-color="white" style="height: 100%;height:100%" />
-                  <q-btn size="7px" @click="deleteItemImg(index)" style="position:absolute;right:-5px;top:-5px;" round color="red" icon="iconfont icon-guanbi1" />
+                  <q-btn size="7px" @click="deleteItemImg(index)" style="position:absolute;right:-5px;top:-5px;" round
+                    color="red" icon="iconfont icon-guanbi1" />
                 </div>
               </div>
-              <el-upload
-                class="avatar-uploader addDutyMain"
-                action=""
-                :before-upload="uploadFile"
-                :show-file-list="false"
-                >
+              <el-upload class="avatar-uploader addDutyMain" action="" :before-upload="uploadFile"
+                :show-file-list="false">
                 <i class="el-icon-plus avatar-uploader-icon"></i>
               </el-upload>
             </div>
           </div>
-          <!-- <div class="col-6" style="margin-top:10px;">
-            <q-uploader :style="{ backgroundImage: 'url(' + BasicImg + ')' }"
-              style="width:auto;height:200px;background-repeat:no-repeat;background-size:cover;" flat hide-upload-btn
-              max-files="10" label="示例图片" multiple accept=".jpg, image/*" :factory="uploadFile" auto-upload>
-            </q-uploader>
-          </div> -->
         </div>
       </q-card-section>
       <q-card-actions align="right" class="bg-white">
@@ -124,8 +131,32 @@
           ItemType: 0,
           Shifts: "",
           ItemImgList: [],
+          DutyCategory: 0, //值班事项分类(1-工作清单，2-突发事项，3-交接说明)
+          DutyType: 0, //值班类型(1-规则事项，2-值班事项)
         },
         BasicImg: "",
+        dutyCategoryList: [{
+            Id: 1,
+            Name: "工作清单"
+          },
+          {
+            Id: 2,
+            Name: "工作清单"
+          },
+          {
+            Id: 3,
+            Name: "交接说明"
+          },
+        ],
+        dutyTypeList: [{
+            Id: 1,
+            Name: "规则事项"
+          },
+          {
+            Id: 2,
+            Name: "值班事项"
+          },
+        ],
         persistent: true,
         schoolOptions: [],
         frequencyOptions: [],
@@ -258,8 +289,8 @@
         })
       },
       //删除图片
-      deleteItemImg(index){
-        this.msg.ItemImgList.splice(index,1);
+      deleteItemImg(index) {
+        this.msg.ItemImgList.splice(index, 1);
       }
     },
   }