DataOps-web/src/views/dataOrigin/rdbmsDataSource/index.vue

<template>
  <div class="pa-3" style="background-color: #FFF;">
    <filter-list :option="filter" @search="handleSearch" />
    <table-list
      class="mt-3"
      :loading="loading"
      :headers="headers"
      :items="items"
      :total="total"
      :page-info="pageInfo"
      @add="handleAdd"
      @pageHandleChange="pageHandleChange"
      @sort="handleSort"
    >
      <template #actions="{ item }">
        <v-btn text color="primary" @click="handleEdit(item)">编辑</v-btn>
        <v-btn text color="error" @click="handleDelete(item.id)">删除</v-btn>
      </template>
      <template v-slot:remark="{item}">
        <td >
          {{ item.remark && item.remark.substr(0, 8) }}
          <template v-if="item.remark && item.remark.length > 8">...</template>
        </td>
      </template>
      <template #status="{ item }">
        <v-chip :color="item.status ? 'success' : 'error'" small>{{ item.status ? '启用' : '禁用' }}</v-chip>
      </template>
    </table-list>
    <edit-dialog :title="title" :visible.sync="show" @submit="handleSubmit">
      <edit-page class="pt-5" v-if="show" ref="edit" :type-items="dataSource_type" :item-data="itemData" @test="handleTest"></edit-page>
    </edit-dialog>

    <Linear :visible.sync="submitLoading"></Linear>
  </div>
</template>

<script>
import EditPage from './components/edit.vue'
import FilterList from '@/components/Filter'
import TableList from '@/components/List/table.vue'
import EditDialog from '@/components/Dialog'
import Linear from '@/components/Progress/linear.vue'
import {
  dataFactoryDictList,
  sourceConfigTest
  // sourceAdd,
  // sourceUpdate,
  // sourceDelete
} from '@/api/dataFactory'
import {
  getDatasourceList,
  saveDatasource,
  deleteDatasource
} from '@/api/dataOrigin'
import {
  setLocalStorageAndTime
  // getLocalStorageAndTime
} from '@/utils/localStorageAndTime'
export default {
  name: 'RDbmsDataSource',
  components: { FilterList, TableList, EditDialog, EditPage, Linear },
  data () {
    return {
      show: false,
      filter: {
        list: [
          { type: 'textField', value: '', label: '数据源名称', key: 'name' }
          // { type: 'autocomplete', value: null, label: '配置类型', key: 'type', items: [] }
        ]
      },
      queryForm: {
        name: '' // 配置名称
      },
      pageInfo: {
        current: 1,
        size: 10
      },
      total: 0,
      orders: [],
      loading: true,
      submitLoading: false,
      headers: [
        { text: '中文名称', align: 'start', value: 'name', slotName: 'name' },
        { text: '英文名称', align: 'start', value: 'en_name' },
        { text: '数据库类型', align: 'start', value: 'type' },
        { text: '主机地址', align: 'start', value: 'host' },
        { text: '端口', align: 'start', value: 'port' },
        { text: '数据库名称', align: 'start', value: 'database' },
        { text: '用户名', align: 'start', value: 'username' },
        { text: '连接参数', align: 'start', value: 'param' },
        { text: '状态', align: 'start', value: 'status' },
        { text: '更新时间', align: 'start', value: 'updateTime' },
        { text: '备注', align: 'start', value: 'desc', useSlot: true },
        { text: '操作', align: 'start', value: 'actions' }
      ],
      items: [],
      dataSource_type: [],
      itemData: {}
    }
  },
  computed: {
    title () {
      return `${Object.keys(this.itemData).length ? '新增' : '编辑'}数据源`
    }
  },
  created () {
    // this.init()
    // this.initPage()
  },
  methods: {
    // async init () {
    //   // const dictionary = getLocalStorageAndTime('dataFactory', 'dataSource_type') || {}
    //   // if (!dictionary.dataSource_type) {
    //   //   await this.initDictionary(dictionary)
    //   // } else this.dataSource_type = dictionary.dataSource_type
    //   // // this.formData.options.find(e => e.key === 'type').items = this.dataSource_type
    //   // this.filter.list.find(e => e.key === 'type').items = this.dataSource_type
    //   this.initPage()
    // },
    async initDictionary (dictionary) {
      try {
        const { data } = await dataFactoryDictList({ type: 'dataSource_type' })
        this.dataSource_type = dictionary.dataSource_type = data[0].itemList
        setLocalStorageAndTime('dataFactory', 'dataSource_type', dictionary)
      } catch (error) {
        this.$snackbar.error(error)
      }
    },
    async initPage () {
      try {
        this.loading = true
        const { data } = await getDatasourceList({
          ...this.queryForm
          // ...this.pageInfo
          // orders: this.orders
        })
        this.total = data.total
        this.items = data.data_source
        // .map(item => {
        //   item.type = this.dataSource_type.find(filter => filter.value === item.type).label
        //   return item
        // })
      } catch (error) {
        this.$snackbar.error(error)
      } finally {
        this.loading = false
      }
    },
    handleSearch (val) {
      this.pageInfo.current = 1
      Object.assign(this.queryForm, val)
      this.initPage()
    },
    async handleSubmit () {
      const _ref = this.$refs.edit
      if (_ref.validate()) {
        const isEdit = Object.keys(this.itemData).length
        const data = {}
        if (isEdit) data.id = this.itemData.id
        Object.assign(data, _ref.getQuery())
        try {
          this.submitLoading = true
          const { msg } = await saveDatasource(data)
          this.$snackbar.success(msg)
          this.show = false
          this.initPage()
        } catch (error) {
          this.$snackbar.error(error)
        } finally {
          this.submitLoading = false
        }
      }
    },
    async handleTest (data) {
      try {
        this.submitLoading = true
        const { msg } = await sourceConfigTest(data)
        this.$snackbar.success(msg)
      } catch (error) {
        this.$snackbar.error(error)
      } finally {
        this.submitLoading = false
      }
    },
    // table 关联操作 新增
    handleAdd () {
      this.show = true
      this.itemData = {}
    },
    // table 关联操作 编辑
    async handleEdit (item) {
      this.itemData = item
      this.show = true
    },
    // table 关联操作 删除
    handleDelete (id) {
      // if (!ids.length) return this.$snackbar.warning('请选择删除项')
      this.$confirm('提示', '是否确定删除该选项').then(async () => {
        try {
          await deleteDatasource({ id })
          this.$snackbar.success('删除成功')
          this.initPage()
        } catch (error) {
          this.$snackbar.error(error)
        }
      })
    },
    // table 关联操作 切换分页
    pageHandleChange (index) {
      this.pageInfo.current = index
      this.initPage()
    },
    handleSort (val) {
      this.orders = val
      this.initPage()
    }
  }
}
</script>

<style lang="scss" scoped>

</style>