github.com/easysoft/zendata@v0.0.0-20240513203326-705bd5a7fd67/ui/src/views/data/buildin/config/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')"
     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>
    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')"
    29                            :labelCol="labelColFull" :wrapperCol="wrapperColFull">
    30          <div class="input-group">
    31            <a-form-model-item prop="prefix">
    32              <a-input v-model="model.prefix" />
    33            </a-form-model-item>
    34            <span class="input-group-addon">{{$t('form.postfix')}}</span>
    35            <a-form-model-item prop="postfix">
    36              <a-input v-model="model.postfix" />
    37            </a-form-model-item>
    38          </div>
    39        </a-form-model-item>
    40  
    41        <a-form-model-item :label="$t('form.loop')"
    42                            :labelCol="labelColFull" :wrapperCol="wrapperColFull">
    43  
    44          <div class="input-group">
    45            <a-form-model-item prop="loop">
    46              <a-input v-model="model.loop" :placeholder="$t('tips.range.int')" />
    47            </a-form-model-item>
    48  
    49            <span class="input-group-addon">{{$t('form.loopfix')}}</span>
    50  
    51            <a-form-model-item prop="loopfix">
    52              <a-input v-model="model.loopfix" />
    53            </a-form-model-item>
    54          </div>
    55        </a-form-model-item>
    56  
    57        <a-form-model-item :label="$t('form.format')"
    58                            :labelCol="labelColFull" :wrapperCol="wrapperColFull">
    59          <div class="input-group">
    60            <a-form-model-item prop="format">
    61              <a-input v-model="model.format"></a-input>
    62            </a-form-model-item>
    63  
    64            <span class="input-group-addon">{{$t('form.function')}}</span>
    65  
    66            <a-form-model-item prop="format">
    67              <a-select v-model="model.format">
    68                <a-select-option value="md5">md5</a-select-option>
    69                <a-select-option value="sha1">sha1</a-select-option>
    70                <a-select-option value="base64">base64</a-select-option>
    71                <a-select-option value="urlencode">urlencode</a-select-option>
    72              </a-select>
    73            </a-form-model-item>
    74          </div>
    75        </a-form-model-item>
    76  
    77  
    78      <a-form-model-item :label="$t('form.desc')" prop="desc" :labelCol="labelColFull" :wrapperCol="wrapperColFull">
    79        <a-input v-model="model.desc" type="textarea" rows="3" />
    80      </a-form-model-item>
    81  
    82      <a-form-model-item class="center" :wrapper-col="{ span: 18, offset: 4 }">
    83        <a-button @click="save" type="primary">{{$t('form.save')}}</a-button>
    84        <a-button @click="reset" style="margin-left: 10px;">{{$t('form.reset')}}</a-button>
    85      </a-form-model-item>
    86    </a-form-model>
    87    </div>
    88  </template>
    89  
    90  <script>
    91  import {getConfig, saveConfig} from "../../../../api/manage";
    92  import {checkLoop, checkDirIsYaml} from "../../../../api/utils";
    93  import {
    94    colsFull,
    95    colsHalf,
    96    labelColFull,
    97    labelColHalf,
    98    labelColHalf2,
    99    wrapperColFull,
   100    wrapperColHalf
   101  } from "@/utils/const";
   102  
   103  export default {
   104    name: 'ConfigEdit',
   105    props: {
   106      afterSave: Function,
   107      id: {
   108        type: [Number, String],
   109        default: function() {
   110          return this.$route.params.id;
   111        }
   112      },
   113    },
   114    data() {
   115      return {
   116        colsFull: colsFull,
   117        colsHalf: colsHalf,
   118        labelColFull: labelColFull,
   119        wrapperColFull: wrapperColFull,
   120        labelColHalf: labelColHalf,
   121        labelColHalf2: labelColHalf2,
   122        wrapperColHalf: wrapperColHalf,
   123  
   124        rules: {
   125          title: [
   126            { required: true, message: this.$i18n.t('valid.required'), trigger: 'change' },
   127          ],
   128          fileName: [
   129            { required: true, message: this.$i18n.t('valid.required'), trigger: 'change' },
   130          ],
   131          loop: [
   132            { validator: checkLoop, message: this.$i18n.t('valid.loop.check'), trigger: 'change' },
   133          ],
   134          folder: [
   135            { validator: checkDirIsYaml, trigger: 'change' },
   136          ],
   137        },
   138  
   139        model: { folder: 'yaml/'},
   140        dirs: [],
   141        workDir: '',
   142      };
   143    },
   144  
   145    watch: {
   146      id: function(newId, oldId) {
   147        if (newId == oldId) {
   148          return;
   149        }
   150        this.loadData();
   151      }
   152    },
   153    mounted () {
   154      this.loadData();
   155    },
   156    methods: {
   157      loadData () {
   158        let id = this.id;
   159        if (id === null) {
   160          return;
   161        }
   162        if (id) {
   163          if (typeof id === 'string') id = Number.parseInt(id);
   164          getConfig(id).then(json => {
   165            this.model = json.data
   166            this.dirs = json.res
   167            this.workDir = json.workDir
   168          })
   169        } else {
   170          this.reset();
   171        }
   172      },
   173      save() {
   174        console.log('save')
   175        this.$refs.editForm.validate(valid => {
   176          console.log(valid, this.model)
   177          if (!valid) {
   178            console.log('validation fail')
   179            return
   180          }
   181  
   182          if (this.model.subFolder && this.model.subFolder != '') this.model.folder += this.model.subFolder
   183          saveConfig(this.model).then(json => {
   184            console.log('saveConfig', json, this.afterSave)
   185            if (this.afterSave) {
   186              this.afterSave(json);
   187            }
   188          })
   189        })
   190      },
   191      reset() {
   192        console.log('reset')
   193        this.model = {folder: 'yaml/'};
   194        this.$refs.editForm.reset()
   195      },
   196    }
   197  }
   198  </script>
   199  
   200  <style lang="less" scoped>
   201  </style>