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

     1  <template>
     2    <div class='main-table'>
     3      <a-table :columns="columns" :data-source="models" :pagination="false" rowKey="id">
     4        <span slot="folderWithPath" slot-scope="text, record">
     5          <a-tooltip placement="top" overlayClassName="tooltip-light">
     6            <template slot="title">
     7              <span>{{record.path | replacePathSep}}</span>
     8            </template>
     9            <a>{{record.path | pathToRelated}}</a>
    10          </a-tooltip>
    11        </span>
    12  
    13        <span slot="action" slot-scope="record">
    14          <a @click="edit(record)" :title="$t('action.edit')"><a-icon type="form" :style="{fontSize: '16px'}" /></a> &nbsp;
    15          <a @click="design(record)" :title="$t('action.design')"><a-icon type="control" :style="{fontSize: '16px'}" /></a> &nbsp;
    16  
    17          <a-popconfirm
    18              :title="$t('tips.delete')"
    19              :okText="$t('msg.yes')"
    20              :cancelText="$t('msg.no')"
    21              @confirm="remove(record)"
    22          >
    23            <a href="#" :title="$t('action.delete')"><a-icon type="delete" :style="{fontSize: '16px'}" /></a> &nbsp;
    24          </a-popconfirm>
    25  
    26          <a-tooltip placement="top" overlayClassName="tooltip-light">
    27            <template slot="title">
    28              <div class="content-width" style="min-width: 280px;">
    29                <div class="title">{{$t('tips.refer')}}</div>
    30                <div class="content">
    31                  <div>config: {{ record.referName }}</div>
    32                </div>
    33              </div>
    34            </template>
    35            <a href="#" :title="$t('tips.refer')">&nbsp; <a-icon type="link" :style="{fontSize: '16px'}" /></a>
    36          </a-tooltip>
    37  
    38        </span>
    39      </a-table>
    40  
    41      <div class="pagination-wrapper">
    42        <a-pagination @change="onPageChange" :current="page" :total="total" :defaultPageSize="15" size="small" simple />
    43      </div>
    44  
    45      <div class="full-screen-modal">
    46        <design-component
    47            ref="designPage"
    48            type="config"
    49            :visible="designVisible"
    50            :modelProp="designModel"
    51            :time="time"
    52            @ok="handleDesignOk"
    53            @cancel="handleDesignCancel" >
    54        </design-component>
    55      </div>
    56  
    57      <a-modal
    58        :visible="editModalVisible"
    59        :title="editModalVisible ? editRecord ? `${$t('menu.config.edit')}: ${editRecord.title}` : $t('title.config.create') : ''"
    60        :footer="false"
    61        :centered="true"
    62        :width="700"
    63        @cancel="handleCancelEditModal"
    64      >
    65        <Edit
    66          :v-if="editModalVisible"
    67          :id="editModalVisible ? editID ? editID : 0 : null"
    68          :afterSave="handleEditSave"
    69        />
    70      </a-modal>
    71    </div>
    72  </template>
    73  
    74  <script>
    75  
    76  import {listConfig, removeConfig} from "../../../../api/manage";
    77  import {PageSize, pathToRelated, replacePathSep} from "../../../../api/utils";
    78  import { DesignComponent } from '../../../../components'
    79  import debounce from "lodash.debounce"
    80  import Edit from './Edit';
    81  
    82  export default {
    83    name: 'ConfigList',
    84    components: {
    85      DesignComponent,
    86      Edit,
    87    },
    88    data() {
    89      const columns = [
    90        {
    91          title: this.$i18n.t('form.name'),
    92          dataIndex: 'title',
    93        },
    94        {
    95          title: this.$i18n.t('form.file'),
    96          dataIndex: 'folder',
    97          scopedSlots: { customRender: 'folderWithPath' },
    98          width: 450
    99        },
   100        {
   101          title: this.$i18n.t('form.opt'),
   102          key: 'action',
   103          scopedSlots: { customRender: 'action' },
   104          width: 100
   105        },
   106      ];
   107  
   108      return {
   109        models: [],
   110        columns,
   111  
   112        designVisible: false,
   113        designModel: {},
   114        time: 0,
   115  
   116        page: 1,
   117        total: 0,
   118        pageSize: PageSize,
   119      };
   120    },
   121    computed: {
   122      keywords: function() {
   123        if (this.$route.query && typeof this.$route.query.search === 'string') {
   124          return this.$route.query.search;
   125        }
   126        return '';
   127      },
   128      editID: function() {
   129        if (this.$route.params && this.$route.params.id !== undefined) {
   130          return this.$route.params.id;
   131        }
   132        return null;
   133      },
   134      editModalVisible: function() {
   135        return this.editID !== null;
   136      },
   137      editRecord: function() {
   138        const {editID} = this;
   139        if (!editID) {
   140          return null;
   141        }
   142        return this.models.find(x => x.id == editID);
   143      }
   144    },
   145    created () {
   146      this.loadData()
   147    },
   148    watch: {
   149      keywords: function() {
   150        this.onSearch();
   151      }
   152    },
   153    filters: {
   154      replacePathSep: function (path) {
   155        return replacePathSep(path)
   156      },
   157      pathToRelated: function (path) {
   158        return pathToRelated(path)
   159      }
   160    },
   161    methods: {
   162      create() {
   163        this.$router.push({path: '/data/buildin/config/edit/0'});
   164      },
   165      loadData() {
   166        listConfig(this.keywords, this.page).then(json => {
   167          console.log('listConfig', json)
   168          this.models = json.data
   169          this.total = json.total
   170        })
   171      },
   172      handleCancelEditModal() {
   173        const {path, query} = this.$route;
   174        const newPath = '/data/buildin/config/list';
   175        if (path !== newPath) {
   176          this.$router.replace({path: newPath, query});
   177        }
   178      },
   179      handleEditSave() {
   180        this.handleCancelEditModal();
   181        this.loadData();
   182      },
   183      edit(record) {
   184        const {path, query = {}} = this.$router;
   185        const newPath = `/data/buildin/config/list/${record.id}`;
   186        if (path !== newPath) {
   187          this.$router.replace({path: newPath, query});
   188        }
   189      },
   190      design(record) {
   191        this.time = Date.now() // trigger data refresh
   192  
   193        this.designVisible = true
   194        this.designModel = record
   195      },
   196      remove(record) {
   197        console.log(record)
   198        removeConfig(record.id).then(json => {
   199          console.log('removeConfig', json)
   200          this.loadData()
   201        })
   202      },
   203  
   204      handleDesignOk() {
   205        console.log('handleDesignOk')
   206        this.designVisible = false
   207      },
   208      handleDesignCancel() {
   209        console.log('handleDesignCancel')
   210        this.designVisible = false
   211      },
   212  
   213      onPageChange(page, pageSize) {
   214        console.log('onPageChange', page, pageSize)
   215        this.page= page
   216        this.loadData()
   217      },
   218      onSearch: debounce(function() {
   219        console.log('onSearch', this.keywords)
   220        this.loadData()
   221      }, 500),
   222    }
   223  }
   224  </script>