github.com/easysoft/zendata@v0.0.0-20240513203326-705bd5a7fd67/ui/src/views/data/buildin/instances/Edit.vue (about)

     1  <template>
     2    <div>
     3      <a-form-model ref="editForm" :model="model" :rules="rules">
     4        <a-form-model-item :label="$t('form.name')" prop="title" :labelCol="labelColFull" :wrapperCol="wrapperColFull">
     5          <a-input v-model="model.title" />
     6        </a-form-model-item>
     7  
     8        <a-form-model-item :label="$t('form.dir')" prop="folder" class="zui-input-group zui-input-with-tips"
     9                            :labelCol="labelColFull" :wrapperCol="wrapperColFull">
    10          <div class="input-group">
    11            <a-form-model-item prop="folder">
    12              <a-select v-model="model.folder">
    13                <a-select-option v-for="(item, index) in dirs" :value="item.name" :key="index">
    14                  {{item.name}}</a-select-option>
    15              </a-select>
    16            </a-form-model-item>
    17            <span class="input-group-addon">{{ $t('form.folder') }}</span>
    18            <a-form-model-item :style="{ display: 'inline-block', width: 'calc(30% - 30px)' }">
    19              <a-input v-model="model.subFolder"></a-input>
    20            </a-form-model-item>
    21          </div>
    22        </a-form-model-item>
    23  
    24        <a-form-model-item :label="$t('form.file.name')" prop="fileName" :labelCol="labelColFull" :wrapperCol="wrapperColFull">
    25          <a-input v-model="model.fileName" />
    26        </a-form-model-item>
    27  
    28      <a-form-model-item :label="$t('form.prefix')" prop="prefix" :labelCol="labelColFull" :wrapperCol="wrapperColFull">
    29        <div class="input-group">
    30          <a-input v-model="model.prefix" />
    31          <span class="input-group-addon">{{ $t('form.postfix') }}</span>
    32          <a-form-model-item prop="postfix">
    33            <a-input v-model="model.postfix" />
    34          </a-form-model-item>
    35        </div>
    36      </a-form-model-item>
    37  
    38      <a-form-model-item :label="$t('form.desc')" prop="desc" :labelCol="labelColFull" :wrapperCol="wrapperColFull">
    39        <a-input v-model="model.desc" type="textarea" rows="3" />
    40      </a-form-model-item>
    41  
    42      <a-form-model-item class="center" :wrapper-col="{ span: 18, offset: 4 }">
    43        <a-button @click="save" type="primary">{{$t('form.save')}}</a-button>
    44        <a-button @click="reset" style="margin-left: 10px;">{{$t('form.reset')}}</a-button>
    45      </a-form-model-item>
    46    </a-form-model>
    47    </div>
    48  </template>
    49  
    50  <script>
    51  import {getInstances, saveInstances} from "../../../../api/manage";
    52  import {checkDirIsYaml} from "../../../../api/utils";
    53  import {
    54    colsFull,
    55    colsHalf,
    56    labelColFull,
    57    labelColHalf,
    58    labelColHalf2,
    59    wrapperColFull,
    60    wrapperColHalf
    61  } from "@/utils/const";
    62  import {getDir} from "@/utils/utils";
    63  
    64  export default {
    65    name: 'RangesEdit',
    66    props: {
    67      afterSave: Function,
    68      id: {
    69        type: [Number, String],
    70        default: function() {
    71          return this.$route.params.id;
    72        }
    73      },
    74    },
    75    data() {
    76      return {
    77        colsFull: colsFull,
    78        colsHalf: colsHalf,
    79        labelColFull: labelColFull,
    80        wrapperColFull: wrapperColFull,
    81        labelColHalf: labelColHalf,
    82        labelColHalf2: labelColHalf2,
    83        wrapperColHalf: wrapperColHalf,
    84  
    85        rules: {
    86          title: [
    87            { required: true, message: this.$i18n.t('valid.required'), trigger: 'change' },
    88          ],
    89          fileName: [
    90            { required: true, message: this.$i18n.t('valid.required'), trigger: 'change' },
    91          ],
    92          folder: [
    93            { validator: checkDirIsYaml, trigger: 'change' },
    94          ],
    95        },
    96  
    97        model: {folder: getDir('yaml')},
    98        dirs: [],
    99        workDir: '',
   100      };
   101    },
   102    watch: {
   103      id: function(newId, oldId) {
   104        if (newId == oldId) {
   105          return;
   106        }
   107        this.loadData();
   108      }
   109    },
   110    mounted () {
   111      this.loadData();
   112    },
   113    methods: {
   114      loadData () {
   115        let id = this.id;
   116        if (typeof id === 'string') id = Number.parseInt(id);
   117        if (!id) {
   118          this.reset();
   119          return
   120        }
   121  
   122        getInstances(id).then(json => {
   123          console.log('getInstances', json)
   124          this.model = json.data
   125          this.dirs = json.res
   126          this.workDir = json.workDir
   127        })
   128      },
   129  
   130      save() {
   131        console.log('save')
   132        this.$refs.editForm.validate(valid => {
   133          console.log(valid, this.model)
   134          if (!valid) {
   135            console.log('validation fail')
   136            return
   137          }
   138  
   139          if (this.model.subFolder && this.model.subFolder != '') this.model.folder += this.model.subFolder
   140          saveInstances(this.model).then(json => {
   141            console.log('saveInstances', json)
   142            if (this.afterSave) {
   143              this.afterSave(json);
   144            }
   145          })
   146        })
   147      },
   148      reset() {
   149        console.log('reset')
   150        this.$refs.editForm.resetFields()
   151        this.model = {folder: getDir('yaml')};
   152      },
   153    }
   154  }
   155  </script>
   156  
   157  <style lang="less" scoped>
   158  </style>