背景

src/views/workflow/instance/component/vars/env-detail.vue

@@ -9,39 +9,41 @@
     :loading="state.loading"
     @onSubmit="onSubmit"
   >
-    <div class="vars-detail">
-      <div class="vars-detail-types">
-        <template v-for="item in optionsType">
-          <div
-            class="__hover"
-            :class="{ active: state.form.type === item.type }"
-            @click="() => (state.form.type = item.type)"
-          >
-            {{ item.label }}
-          </div>
-        </template>
+    <div class="bm-form">
+      <div class="vars-detail">
+        <div class="vars-detail-types">
+          <template v-for="item in optionsType">
+            <div
+              class="__hover"
+              :class="{ active: state.form.type === item.type }"
+              @click="() => (state.form.type = item.type)"
+            >
+              {{ item.label }}
+            </div>
+          </template>
+        </div>
+        <CzrForm ref="ref_form" class="vars-detail-form" layout="y">
+          <CzrFormColumn
+            :span="24"
+            required
+            label="显示名称"
+            v-model:param="state.form.label"
+          />
+          <CzrFormColumn
+            :span="24"
+            required
+            label="变量名称"
+            v-model:param="state.form.key"
+          />
+          <CzrFormColumn
+            :span="24"
+            required
+            label="值"
+            :link="state.form.type === 'String' ? 'input' : 'number'"
+            v-model:param="state.form.value"
+          />
+        </CzrForm>
       </div>
-      <CzrForm ref="ref_form" class="vars-detail-form" layout="y">
-        <CzrFormColumn
-          :span="24"
-          required
-          label="显示名称"
-          v-model:param="state.form.label"
-        />
-        <CzrFormColumn
-          :span="24"
-          required
-          label="变量名称"
-          v-model:param="state.form.key"
-        />
-        <CzrFormColumn
-          :span="24"
-          required
-          label="值"
-          :link="state.form.type === 'String' ? 'input' : 'number'"
-          v-model:param="state.form.value"
-        />
-      </CzrForm>
     </div>
   </CzrDialog>
 </template>

src/views/workflow/instance/component/vars/vars-detail.vue

@@ -9,72 +9,74 @@
     :loading="state.loading"
     @onSubmit="onSubmit"
   >
-    <div class="vars-detail">
-      <div class="vars-detail-types">
-        <template v-for="item in optionsType">
-          <div
-            class="__hover"
-            :class="{ active: state.form.type === item.type }"
-            @click="() => (state.form.type = item.type)"
-          >
-            {{ item.label }}
-          </div>
-        </template>
-      </div>
-      <CzrForm ref="ref_form" class="vars-detail-form" layout="y">
-        <CzrFormColumn
-          :span="24"
-          required
-          label="显示名称"
-          v-model:param="state.form.label"
-        />
-        <CzrFormColumn
-          :span="24"
-          required
-          label="变量名称"
-          v-model:param="state.form.key"
-        />
-        <template v-if="state.form.type === 'String'">
+    <div class="bm-form">
+      <div class="vars-detail">
+        <div class="vars-detail-types">
+          <template v-for="item in optionsType">
+            <div
+              class="__hover"
+              :class="{ active: state.form.type === item.type }"
+              @click="() => (state.form.type = item.type)"
+            >
+              {{ item.label }}
+            </div>
+          </template>
+        </div>
+        <CzrForm ref="ref_form" class="vars-detail-form" layout="y">
           <CzrFormColumn
             :span="24"
             required
-            label="最大长度"
-            v-model:param="state.form.length"
+            label="显示名称"
+            v-model:param="state.form.label"
           />
-        </template>
-        <template v-if="state.form.type === 'Select'">
-          <div class="mb-2 w-full">
-            <el-button @click="state.options.push({ value: '' })"
-              >添加下拉选项</el-button
-            >
-          </div>
-          <template v-for="(item, index) in state.options">
-            <div class="mb-2 flex w-full items-center">
-              <CzrFormColumn
-                class="__czr-table-form-column"
-                :span="22"
-                required
-                :label="`选项${index + 1}`"
-                v-model:param="item.value"
-                layout="x"
-              />
-              <SvgIcon
-                v-if="state.options.length > 1"
-                name="czr_del"
-                class="__hover ml-2"
-                @click="state.options.splice(index, 1)"
-              />
+          <CzrFormColumn
+            :span="24"
+            required
+            label="变量名称"
+            v-model:param="state.form.key"
+          />
+          <template v-if="state.form.type === 'String'">
+            <CzrFormColumn
+              :span="24"
+              required
+              label="最大长度"
+              v-model:param="state.form.length"
+            />
+          </template>
+          <CzrFormColumn
+            :span="24"
+            required
+            label="是否必填"
+            v-model:param="state.form.required"
+            link="switch"
+          />
+          <template v-if="state.form.type === 'Select'">
+            <div class="mb-2 w-full">
+              <el-button @click="state.options.push({ value: '' })"
+                >添加下拉选项</el-button
+              >
             </div>
+            <template v-for="(item, index) in state.options">
+              <div class="mb-2 flex w-full items-center">
+                <CzrFormColumn
+                  class="__czr-table-form-column"
+                  :span="22"
+                  required
+                  :label="`选项${index + 1}`"
+                  v-model:param="item.value"
+                  layout="x"
+                />
+                <SvgIcon
+                  v-if="state.options.length > 1"
+                  name="czr_del"
+                  class="__hover ml-2"
+                  @click="state.options.splice(index, 1)"
+                />
+              </div>
+            </template>
           </template>
-        </template>
-        <CzrFormColumn
-          :span="24"
-          required
-          label="是否必填"
-          v-model:param="state.form.required"
-          link="switch"
-        />
-      </CzrForm>
+        </CzrForm>
+      </div>
     </div>
   </CzrDialog>
 </template>
@@ -102,9 +104,7 @@ const props = defineProps({
 })
 const state: any = reactive({
   loading: false,
-  form: {
-    type: 'String',
-  },
+  form: {},
   options: [{ value: '' }],
 })
 const optionsType = [
@@ -131,6 +131,7 @@ watch(
     if (n) {
       state.form = props.transfer.row || {
         type: 'String',
+        required: false,
       }
       if (state.form.type === 'Select') {
         state.options = state.form.options.map((v) => ({ value: v }))