fix: error for the builder editor

Signed-off-by: saltbo <[email protected]>
kiaedev · Nov 29, 2022 · 2e335b3 · 2e335b3
1 parent eeac8a8
commit 2e335b3
Showing 1 changed file with 47 additions and 24 deletions.
diff --git a/src/pages/admin/system/builder/Editor.vue b/src/pages/admin/system/builder/Editor.vue
@@ -44,11 +44,11 @@ runAsync().then(onProviderSwitch)
 
 
 const removeDomain = (index: any) => {
- formState.lbs.splice(index, 1);
+ formState.packs.splice(index, 1);
 };
 
 const addDomain = () => {
- formState.lbs.push({
+ formState.packs.push({
  value: '',
  key: Date.now(),
  envs: []
@@ -65,61 +65,72 @@ const addDomain = () => {
  <a-form :model="formState" name="basic" :label-col="{ span: 5 }" :wrapper-col="{ span: 15 }" autocomplete="off"
  @finish="formSubmit">
 
- <a-form-item :label="$t('name')" name="name" :rules="[{ required: true, message: 'Please input the name!' }]">
+ <a-form-item :label="$t('name')" name="name"
+ :rules="[{ required: true, message: 'Please input the name!' }]">
  <a-input v-model:value="formState.name" />
  </a-form-item>
- <a-form-item :label="$t('intro')" name="intro" :rules="[{ required: true, message: 'Please input the intro!' }]">
+ <a-form-item :label="$t('intro')" name="intro"
+ :rules="[{ required: true, message: 'Please input the intro!' }]">
  <a-input v-model:value="formState.intro" />
  </a-form-item>
- <a-form-item label="Registry" name="registry_id" :rules="[{ required: true, message: 'Please select the registry!' }]">
+ <a-form-item label="Registry" name="registry_id"
+ :rules="[{ required: true, message: 'Please select the registry!' }]">
  <a-select v-model:value="formState.registry_id" :options="registries" />
  </a-form-item>
 
  <a-form-item label="Stack" name="cnb">
  <a-select v-model:value="formState.cnb" @change="onProviderSwitch" :options="suggestedStacks" />
  </a-form-item>
- <a-form-item label="StackID" name="stack_id" :rules="[{ required: true, message: 'Please input the stackId!' }]">
+ <a-form-item label="StackID" name="stack_id"
+ :rules="[{ required: true, message: 'Please input the stackId!' }]">
  <a-input v-model:value="formState.stack_id" />
  </a-form-item>
  <a-form-item :label="$t('buildImage')" name="build_image"
  :rules="[{ required: true, message: 'Please input the build image!' }]">
  <a-input v-model:value="formState.build_image" />
  </a-form-item>
- <a-form-item :label="$t('runImage')" name="run_image" :rules="[{ required: true, message: 'Please input the run image!' }]">
+ <a-form-item :label="$t('runImage')" name="run_image"
+ :rules="[{ required: true, message: 'Please input the run image!' }]">
  <a-input v-model:value="formState.run_image" />
  </a-form-item>
  <a-form-item label="Buildpacks">
- <a-row v-for="(pack, index) in formState.packs" :key="index" style="margin: 10px 0">
+ <a-row v-for="(pack, index) in formState.packs" :key="index" style="margin: 10px 0" class="inner-form">
  <a-col>
  <a-row>
- <a-col :span="6">
- <a-input v-model:value="pack.lang" placeholder="Language" />
+ <a-col :span="16">
+ <a-input size="small" v-model:value="pack.id" placeholder="PackId"></a-input>
  </a-col>
- <a-col :span="12" :offset="1">
- <a-input v-model:value="pack.id" placeholder="PackId"></a-input>
+ <a-col :span="7" :offset="1">
+ <a-input size="small" v-model:value="pack.lang" placeholder="Language" />
+ </a-col>
+ </a-row>
+ <a-row>
+ <a-col :span="24">
+ <a-input size="small" v-model:value="pack.image" placeholder="PackImage"></a-input>
  </a-col>
  </a-row>
- <a-input v-model:value="pack.image" placeholder="PackImage"></a-input>
 
  <a-row v-for="(env, index) in pack.envs" :key="index">
- <a-col :span="5">
- <a-input v-model:value="env.name" placeholder="Environment Name" />
+ <a-col :span="10">
+ <a-input size="small" v-model:value="env.name" placeholder="EnvVar Name" />
  </a-col>
- <a-col :span="13" :offset="1">
- <a-input v-model:value="env.intro" placeholder="Introduction"></a-input>
+ <a-col :span="9" :offset="1">
+ <a-input size="small" v-model:value="env.intro" placeholder="Introduction"></a-input>
  </a-col>
- <a-col :span="4" :offset="1">
+ <a-col :span="3" :offset="1">
  <MinusCircleOutlined class="dynamic-delete-button"
  @click="pack.envs.splice(index, 1);" />
  </a-col>
  </a-row>
+ <a-row>
+ <a-button size="small" type="dashed" style="width: 50%" @click="pack.envs.push({})">
+ <PlusOutlined />
+ Add EnvVar
+ </a-button>
+ </a-row>
 
- <a-button type="dashed" style="width: 50%" @click="pack.envs.push({})">
- <PlusOutlined />
- Add Environment
- </a-button>
  </a-col>
- <a-col :span="4" :offset="1">
+ <a-col :span="1" :offset="3">
  <MinusCircleOutlined v-if="formState.packs.length > 1" class="dynamic-delete-button"
  :disabled="formState.packs.length === 1" @click="removeDomain(index)" />
  </a-col>
@@ -136,4 +147,16 @@ const addDomain = () => {
  </a-form-item>
  </a-form>
  </a-modal>
-</template>
+</template>
+
+<style scoped>
+.inner-form {
+ background-color: #eef0f5;
+ padding: 10px 10px;
+ margin: 0px 50px
+}
+
+.inner-form .ant-row {
+ margin: 3px 0;
+}
+</style>