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