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