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

     1  <template>
     2    <div>
     3      <a-form-model ref="editForm" :model="model" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol" :colon="false">
     4        <a-form-model-item :label="$t('form.name')" prop="title">
     5          <a-input v-model="model.title" />
     6        </a-form-model-item>
     7  
     8        <a-form-model-item :label="$t('form.dir')" prop="folder">
     9          <div class="input-group">
    10            <a-select v-model="model.folder">
    11              <a-select-option v-for="(item, index) in dirs" :value="item.name" :key="index">
    12                {{item.name}}</a-select-option>
    13            </a-select>
    14            <span class="input-group-addon fix-border">{{ $t('form.folder') }}</span>
    15            <a-input v-model="model.subFolder"></a-input>
    16          </div>
    17        </a-form-model-item>
    18  
    19        <a-form-model-item :label="$t('form.file.name')" prop="fileName">
    20          <a-input v-model="model.fileName" />
    21        </a-form-model-item>
    22  
    23        <a-form-model-item :label="$t('form.desc')" prop="desc">
    24          <a-input v-model="model.desc" type="textarea" rows="3" />
    25        </a-form-model-item>
    26  
    27        <a-form-model-item :wrapper-col="{ span: 18, offset: 4 }">
    28          <a-button @click="save" type="primary">
    29            {{$t('form.save')}}
    30          </a-button>
    31          <a-button @click="reset">
    32            {{$t('form.reset')}}
    33          </a-button>
    34        </a-form-model-item>
    35      </a-form-model>
    36    </div>
    37  </template>
    38  
    39  <script>
    40  
    41  import {getDef, saveDef} from "../../../api/manage";
    42  import {labelCol, wrapperCol} from "../../../utils/const";
    43  import {checkDirIsUsers} from "../../../api/utils";
    44  
    45  export default {
    46    name: 'Mine',
    47    props: {
    48      id: {
    49        type: Number,
    50        default: function() {
    51          return this.$route.params.id;
    52        }
    53      },
    54      afterSave: Function
    55    },
    56    data() {
    57      return {
    58        labelCol: labelCol,
    59        wrapperCol: wrapperCol,
    60        rules: {
    61          title: [
    62            { required: true, message: this.$i18n.t('valid.required'), trigger: 'change' },
    63          ],
    64          fileName: [
    65            { required: true, message: this.$i18n.t('valid.required'), trigger: 'change' },
    66          ],
    67          folder: [
    68            { validator: checkDirIsUsers, trigger: 'change' },
    69          ],
    70        },
    71        model: {},
    72        dirs: [],
    73        workDir: '',
    74      };
    75    },
    76    watch: {
    77      id: function() {
    78        this.loadData();
    79      }
    80    },
    81    mounted () {
    82      this.loadData();
    83    },
    84    methods: {
    85      loadData() {
    86        getDef(this.id).then(json => {
    87          this.model = json.data
    88          this.dirs = json.res
    89          this.workDir = json.workDir
    90        })
    91      },
    92      save() {
    93        this.$refs.editForm.validate(valid => {
    94          console.log(valid, this.model)
    95          if (!valid) {
    96            console.log('validation fail')
    97            return
    98          }
    99  
   100          if (this.model.subFolder && this.model.subFolder != '') this.model.folder += this.model.subFolder
   101          saveDef(this.model).then(json => {
   102            console.log('saveDef', json)
   103            if (this.afterSave) {
   104              this.afterSave(json);
   105            }
   106          })
   107        })
   108      },
   109      reset () {
   110        this.loadData()
   111      },
   112    }
   113  }
   114  </script>
   115  
   116  <style lang="less" scoped>
   117  
   118  </style>