样式调整

src/views/system/workflow/workflowApproved.vue

@@ -1,42 +1,45 @@
 <template>
   <m-dialog title="审批配置" ref="dialog" @sure="onSure">
-    <el-form ref="form" inline :model="formValues" label-width="100px" >
+    <el-form ref="form" inline :model="formValues" label-width="70px" >
       <el-form-item label="工作流">
         <el-tag>{{ item.workFlowTmplate?.name }}</el-tag>
       </el-form-item>
-      <m-card
-        v-for="(item, index) in formValues.items"
-        :key="item.key"
-        shadow="never"
-        class="mb-3 cardBox"
-      >
-        <el-form-item label="处理对象" required :prop="`items.${index}.handleType`">
-          <el-select v-model="item.handleType" placeholder="请选择处理对象" @change="onChange(item)">
-            <el-option label="指定人" value="0"></el-option>
-            <el-option label="指定部室岗位" value="1"></el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="处理方" required :prop="`items.${index}.handleValue`">
-          <el-cascader
-            v-model="item.handleValue"
-            :ref="`cascader_${index}`"
-            placeholder="请选择处理方"
-            :show-all-levels="false"
-            :props="item.handleType === '0' ? personOptions : organizationProp"
-            :options="item.handleType === '0' ? personOrganizationTree : postOrganizationTree"
-            @change="onChangeCascader(item, `cascader_${index}`)"
-          ></el-cascader>
-        </el-form-item>
-        <div class="button-group">
-          <m-button :disabled="index === 0" icon="el-icon-top" circle size="mini" @click="onUp(index)"></m-button>
-          <m-button :disabled="index === formValues.items.length - 1" icon="el-icon-bottom" circle size="mini" @click="onDown(index)"></m-button>
-          <m-button type="danger" icon="el-icon-delete" circle size="mini" @click="onDelete(index)"></m-button>
-        </div>
-      </m-card>
+      <el-form-item label="工作流">
+        <m-card shadow="never">
+          <m-card
+            v-for="(item, index) in formValues.items"
+            :key="item.key"
+            class="mb-5 cardBox"
+          >
+            <el-form-item label="处理对象" :prop="`items.${index}.handleType`">
+              <el-select v-model="item.handleType" placeholder="请选择处理对象" @change="onChange(item)">
+                <el-option label="指定人" value="0"></el-option>
+                <el-option label="指定部室岗位" value="1"></el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="处理方" :prop="`items.${index}.handleValue`" :rules="{ required: true, message: '请选择处理方', trigger: 'change' }">
+              <el-cascader
+                v-model="item.handleValue"
+                :ref="`cascader_${index}`"
+                placeholder="请选择处理方"
+                :show-all-levels="false"
+                :props="item.handleType === '0' ? personOptions : organizationProp"
+                :options="item.handleType === '0' ? personOrganizationTree : postOrganizationTree"
+                @change="onChangeCascader(item, `cascader_${index}`)"
+              ></el-cascader>
+            </el-form-item>
+            <div class="button-group">
+              <m-button :disabled="index === 0" icon="el-icon-top" circle size="mini" @click="onUp(index)"></m-button>
+              <m-button :disabled="index === formValues.items.length - 1" icon="el-icon-bottom" circle size="mini" @click="onDown(index)"></m-button>
+              <m-button type="danger" icon="el-icon-delete" circle size="mini" @click="onDelete(index)"></m-button>
+            </div>
+          </m-card>
+          <div class="text-center">
+            <el-button type="orange" @click="onAdd" icon="el-icon-plus">新增一条记录</el-button>
+          </div>
+        </m-card>
+      </el-form-item>
     </el-form>
-    <div class="text-center">
-      <el-button @click="onAdd" icon="el-icon-plus">新增一条记录</el-button>
-    </div>
   </m-dialog>
 </template>
 
@@ -209,10 +212,11 @@ export default {
 <style lang="scss" scoped>
 .cardBox {
   position: relative;
+  overflow: visible;
   .button-group {
     position: absolute;
     right: 10px;
-    bottom: 10px;
+    top: -20px;
   }
 }
 </style>