irc_web/.svn/pristine/2a/2aa493cd7796fa3ff19cde32c97d1235ab93a155.svn-base

<template>
  <div class="template-wrapper">
    <div class="left-wrapper">
      <box-content>
        <div class="search">
          <SearchForm
            size="mini"
            :that="this"
            :search-data="searchData"
            :search-form="template_form"
            :search-handle="template_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>
            <el-button type="primary" size="small" @click="handleSetting">Setting</el-button>
          </span>
        </div>
        <base-table
          v-loading="loading"
          :columns="template_cols"
          :list="list"
          :search-data="searchData"
          :total="total"
          @getList="getList"
          @items="handleView"
          @edit="handleEdit"
          @delete="handleDelete"
          @sortByColumn="sortByColumn"
        />
      </box-content>
    </div>
    <div class="right-wrapper">
      <div v-if="template.Name">
        <span>Name:</span>
        <el-input v-model="template.Name" size="small" style="width:150px;" readonly />
      </div>
      <el-table v-if="template.Name" ref="itemList" v-loading="itemLoading" :data="itmeList" class="table" size="small" @select="onTableSelect">
        <el-table-column type="selection" width="50" />
        <el-table-column type="index" width="40" />
        <el-table-column prop="Name" label="Item" show-overflow-tooltip />
      </el-table>

    </div>
    <template-form v-if="template_model.visible" :data="rowData" @close="closeModel" />
  </div>
</template>
<script>
import { getQaTemplateList, deleteQATemplate, getQaTemplateConfigList, configQATemplateItem } from '@/api/dictionary'
import { template_cols, template_form, template_handle, template_model } from './template'
import BoxContent from '@/components/BoxContent'
import SearchForm from '@/components/BaseForm/search-form'
import BaseTable from '@/components/BaseTable'
import TemplateForm from './components/TemplateForm'
import tableMixins from '@/mixins/table'
const searchDataDefault = () => {
  return {
    Name: '',
    PageIndex: 1,
    PageSize: 20
  }
}
export default {
  name: 'TemplateList',
  components: { BoxContent, SearchForm, BaseTable, TemplateForm },
  mixins: [tableMixins],
  data() {
    return {
      template_cols,
      template_form,
      template_handle,
      template_model,
      searchData: searchDataDefault(),
      list: [],
      total: 0,
      loading: false,
      rowData: {},
      template: {},
      itmeList: [],
      itemLoading: false
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    getList() {
      this.loading = true
      getQaTemplateList(this.searchData).then(res => {
        this.loading = false
        this.list = res.Result.CurrentPageData
        this.total = res.Result.TotalCount
        this.template = {}
        this.itmeList = []
      })
    },
    handleAdd() {
      this.rowData = {}
      this.template_model.title = 'New'
      this.template_model.visible = true
    },
    handleSetting() {
      this.$router.push({ name: 'TemplateOfSetting' })
    },
    handleEdit(row) {
      this.rowData = row
      this.template_model.title = 'Edit'
      this.template_model.visible = true
    },
    handleDelete(row) {
      this.$confirm('Sure to delete?', {
        type: 'warning',
        distinguishCancelAndClose: true,
        confirmButtonText: 'Ok',
        cancelButtonText: 'Cancel'
      })
        .then(() => {
          deleteQATemplate(row.Id)
            .then(res => {
              if (res.IsSuccess) {
                this.list.splice(this.list.findIndex(item => item.Id === row.Id), 1)
                this.$message.success('Deleted successfully!')
              }
            })
        })
    },
    handleView(row) {
      this.template = row
      this.itemLoading = true
      getQaTemplateConfigList(row.Id, row.ModalityId).then(res => {
        this.itmeList = res.Result
        this.itmeList.forEach(val => {
          this.$nextTick(
            function() {
              this.$refs.itemList.toggleRowSelection(val, val.IsSelect)
            }.bind(this)
          )
        })
        this.itemLoading = false
      })
    },
    onTableSelect(rows, row) {
      const param = {
        qaTemplateItemId: row.Id,
        qaTemplateId: this.template.Id,
        isSelect: rows.indexOf(row) !== -1
      }
      configQATemplateItem(param).then(res => {
        this.$message.success('Updated successfully')
      })
    },
    handleReset() {
      this.searchData = searchDataDefault()
      this.getList()
      this.template = {}
      this.itmeList = []
    },
    closeModel() {
      this.template_model.visible = false
      this.getList()
    }
  }
}
</script>
<style lang="scss">
.template-wrapper{
  height: 100%;
  display: flex;
  .left-wrapper{
    width: 0;
    flex-grow: 4;
    border-right: 1px solid #ccc;
  }
  .right-wrapper{
    width: 0;
    flex-grow: 3;
    padding: 5px;
    thead{
      .el-table-column--selection{
        .cell {
          display: none;
        }
      }
    }
  }
}
</style>