irc_web/.svn/pristine/ac/ac32e682a45353825d17437be4d6aec7e864430e.svn-base

<template>
  <box-content>
    <div class="search">
      <SearchForm
        size="mini"
        :that="this"
        :search-data="searchData"
        :search-form="setting_form"
        :search-handle="setting_handle"
        @search="handleSearch"
        @reset="handleReset"
      />
      <span style="margin-left:auto;">
        <el-button type="primary" size="small" style="margin-left:auto;" @click="handleAdd">New</el-button>
      </span>
    </div>
    <base-table
      v-loading="loading"
      :columns="setting_cols"
      :list="list"
      :search-data="searchData"
      :total="total"
      @getList="getList"
      @edit="handleEdit"
      @delete="handleDelete"
      @sortByColumn="sortByColumn"
    >
      <!-- 选择自定义slot -->
      <template slot="modalitySlot" slot-scope="{scope}">
        {{ scope.row.ModalityList && scope.row.ModalityList.length>0?scope.row.ModalityList.join(', '):'' }}
      </template>
    </base-table>
    <setting-form v-if="setting_model.visible" :data="rowData" @close="closeModel" />
  </box-content>
</template>
<script>

import { getQATemplateItemList, deleteQATemplateItem } from '@/api/dictionary'
import { getBasicDataSelects } from '@/api/dictionary/dictionary'
import { setting_cols, setting_form, setting_handle, setting_model } from './template'
import BoxContent from '@/components/BoxContent'
import SearchForm from '@/components/BaseForm/search-form'
import BaseTable from '@/components/BaseTable'
import SettingForm from './components/SettingForm.vue'
const searchDataDefault = () => {
  return {
    ModalityId: '',
    PageIndex: 1,
    PageSize: 20
  }
}
export default {
  name: 'TemplateSettings',
  components: { BoxContent, SearchForm, BaseTable, SettingForm },
  data() {
    return {
      setting_cols,
      setting_form,
      setting_handle,
      setting_model,
      list: [],
      loading: false,
      total: 0,
      searchData: searchDataDefault(),
      rowData: {},
      readingType: {}
    }
  },
  mounted() {
    this.getList()
    this.getInfo()
  },
  methods: {
    getList() {
      this.loading = true
      getQATemplateItemList(this.searchData).then(res => {
        this.loading = false
        this.list = res.Result.CurrentPageData
        this.total = res.Result.TotalCount
      }).catch(() => { this.loading = false })
    },
    findItemIndex(key) {
      return this.setting_form.findIndex(value => value.prop && value.prop === key
      )
    },
    async getInfo() {
      await this.getDicData()
      if (this.readingType.length > 0) {
        const index = this.findItemIndex('ModalityId')
        this.$set(this.setting_form[index], 'options', this.readingType)
      }
    },
    getDicData() {
      getBasicDataSelects(['ReadingType']).then(res => {
        const { ReadingType } = { ...res.Result }
        this.readingType = ReadingType || {}
      }).catch(() => {})
    },
    handleAdd() {
      this.rowData = {}
      this.setting_model.title = 'Add'
      this.setting_model.visible = true
    },
    handleEdit(row) {
      this.rowData = row
      this.setting_model.title = 'Add'
      this.setting_model.visible = true
    },
    handleDelete(row) {
      this.$confirm('Sure to delete?', {
        type: 'warning',
        distinguishCancelAndClose: true,
        confirmButtonText: 'Ok',
        cancelButtonText: 'Cancel'
      })
        .then(() => {
          deleteQATemplateItem(row.Id)
            .then(res => {
              if (res.IsSuccess) {
                this.list.splice(this.list.findIndex(item => item.Id === row.Id), 1)
                this.$message.success('Deleted successfully!')
              }
            })
        })
    },
    sortByColumn(column) {
      if (column.order === 'ascending') {
        this.searchData.Asc = true
      } else {
        this.searchData.Asc = false
      }
      this.searchData.SortField = column.prop
      this.searchData.PageIndex = 1
      this.getList()
    },
    handleReset() {
      this.searchData = searchDataDefault()
      this.getList()
    },
    closeModel() {
      this.setting_model.visible = false
      this.getList()
    }
  }
}
</script>
<style lang="scss">
.template-setting{
  height: 100%;
  .el-header{
    .filter-container{
      margin-top: 10px;
      display: flex;
      align-items: center;
      span{
        font-size:13px;
        margin-right:5px;
      }
      .mr{
        margin-right: 5px;
        width: 120px;
      }
    }
  }
  .el-main{
    height:calc(100% - 40px);
    padding: 0 20px;
    .data-table{
      height: 100%;
    }
  }
  .el-footer{
    padding: 0 20px;
  }
  .el-dialog__header{
    padding:10px;
  }
  .el-dialog__body{
    padding:10px;
  }
}
</style>