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