biobank/src/dashoo.cn/frontend_animal/src/pages/samples/waitingstore/index.vue

<template>
  <div>
    <el-card class="box-card" style="height: calc(100vh - 92px);">
      <div slot="header" style="height: 20px;">
        <span style="float: left;">
          <i class="icon icon-table2"></i>
        </span>
        <el-breadcrumb class="heading" style="float: left; margin-left: 5px">
          <el-breadcrumb-item :to="{ path: '/' }">平台首页</el-breadcrumb-item>
          <el-breadcrumb-item>待复存样本</el-breadcrumb-item>
        </el-breadcrumb>
        <span style="float: right;">
          <el-dropdown split-button type="primary" size="mini" style="margin-left:10px; margin-top: -4px;" @command="handleExportsamplesCommand">
            导出
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item style="color:black;" command="exportchosen">导出所选样本</el-dropdown-item>
              <el-dropdown-item style="color:black;" command="exportpage">导出当前页样本</el-dropdown-item>
              <el-dropdown-item style="color:black;" command="exportall">导出所有样本</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <el-button type="primary" size="mini" style="margin-left:10px; margin-top: -4px;" @click="batchprint">打印</el-button>
          <el-button type="primary" size="mini" style="margin-left:10px; margin-top: -4px;" @click="batchsave">复存</el-button>
          <el-button type="primary" size="mini" style="margin-left:10px; margin-top: -4px;" @click="columndialogVisible = true">显示列</el-button>
        </span>
        <el-form ref="form" :inline="true" style="float: right; margin-top: -10px">
          <el-form-item label="样本条码">
            <el-input size="mini" style="width: 165px;" v-model="BarCode" placeholder="请输入样本条码"></el-input>
          </el-form-item>
          <el-form-item>
            <el-dropdown split-button type="primary" size="mini" @click="seachdata" @command="handleSearchCommand">
              查询
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="search">高级查询</el-dropdown-item>
                <el-dropdown-item command="clear">查询重置</el-dropdown-item>
                <el-dropdown-item style="color:black;" v-for="item in searchTemplates" :key="item.Name" :command="item.Name">{{item.Name}}</el-dropdown-item>
                <el-dropdown-item divided style="color:black;" command="编辑">自定义</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-form-item>
        </el-form>
      </div>

      <el-table ref="multipleTable" :data="list" bordertooltip-effect="dark" border height="calc(100vh - 230px)" style="width: 100%;"
        @selection-change="handleSelectionChange" @header-dragend="header_dragend">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="操作" width="80" align="center" fixed>
          <template slot-scope="scope">
            <router-link :to="'/samples/waitingstore/'+scope.row.EquipmentId+'_'+scope.row.Id+'_'+scope.row.Capacity+'_'+scope.row.SampleCode+'_'+scope.row.BarCode+'_'+scope.row.SampleType+'_'+scope.row.Unit+'/unsave?pname=samples-waitingstore&size='+size+'&currentPage='+currentPage"
              v-if="scope.row.IState === 6">
              <el-button size="small" type="text" title="复存">
                <i class="icon icon-loop"></i>
              </el-button>
            </router-link>
            <router-link :to="'/samples/waitingstore/'+scope.row.EquipmentId+'_'+scope.row.Id+'_'+scope.row.Capacity+'_'+scope.row.SampleCode+'_'+scope.row.BarCode+'_'+scope.row.SampleType+'_'+scope.row.Unit+'_'+scope.row.ShelfId+'_'+scope.row.BoxId+'_'+scope.row.Position + '/unsave?pname=samples-waitingstore&size='+size+'&currentPage='+currentPage"
              v-else>
              <el-button size="small" type="text" title="复存">
                <i class="icon icon-loop"></i>
              </el-button>
            </router-link>
            <router-link :to="'/samples/waitingstore/'+scope.row.Id + '/detailed?pname=samples-waitingstore&size='+size+'&currentPage='+currentPage">
              <el-button type="text" size="small" title="详情" style="margin-left:3px;">
                <i class="icon icon-eye"></i>
              </el-button>
            </router-link>
          </template>
        </el-table-column>
        <el-table-column :label="item.name" :key="item.name" v-if="item.show" v-for="item in showcolumn" :width="item.columnwidth"
          align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <template v-if="item.filed === 'SourceName'">
              <router-link :to="'/biobank/source/'+ scope.row.SourceId + '/sourcedetail?pname=samples-prerecorded&size='+size+'&currentPage='+currentPage"
                :style="{color: scope.row.FamilyState === 0 ? 'blue' : 'red'}">
                {{scope.row.SourceName}}
              </router-link>
            </template>
            <template v-else-if="item.filed === 'ValidityDate' || item.filed === 'ReceiveDate'">
              {{jstimehandle(scope.row[item.filed])}}
            </template>
             <template v-else-if="item.filed === 'SurveyDate'">
              {{Jstimehandle(scope.row[item.filed])}}
            </template>
            <!-- <template v-else-if="item.filed === 'Location'">
              <router-link :to="'/equipment/'+scope.row.EquipmentId +'/manage_new' + getstationurl(scope.row)">
                {{scope.row.ECode}}-{{numtoupchar(scope.row.ShelfY)}}{{scope.row.ShelfX}}-{{numtoupchar(scope.row.BoxY)}}{{scope.row.BoxX}}-{{postiontoupchar(scope.row.Position)}}
              </router-link>
            </template> -->
            <template v-else>
              {{scope.row[item.filed]}}
            </template>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
        :page-sizes="[10, 100, 200, 500]" :page-size="size" layout="total, sizes, prev, pager, next, jumper" :total="currentItemCount">
      </el-pagination>
    </el-card>

    <el-dialog title="高级查询" :visible.sync="dialogVisible" width="1000px">
      <el-form ref="advancedSearchForm" label-width="90px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="样本条码">
              <el-input v-model="BarCode" placeholder="请输入样本条码" size="mini" style="width:100%"></el-input>
            </el-form-item>
            <el-form-item label="样本内码" v-if="acc !='srNA2'">
              <el-input v-model="InnerCode" placeholder="请输入样本内码" size="mini" style="width:100%"></el-input>
            </el-form-item>
            <el-form-item label="样本类型">
              <el-select v-model="SampleType" clearable placeholder="请选择" @change="selsampletypeChange" size="mini"
                style="width:100%">
                <el-option v-for="item in sampletypes" :label="item.Name" :value="item.Id" :key="item.Id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="录入日期">
              <el-date-picker v-model="CreateOn" type="daterange" range-separator="至" start-placeholder="开始日期"
                end-placeholder="结束日期" size="mini" style="width:100%"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="样本编码">
              <el-input v-model="SampleCode" placeholder="请输入样本编码" size="mini" style="width:100%"></el-input>
            </el-form-item>
            <el-form-item label="名称">
              <el-input v-model="Name" placeholder="请输入名称" size="mini" style="width:100%"></el-input>
            </el-form-item>
            <el-form-item label="特有扩展">
              <el-select v-model="STNoteField" placeholder="请选择" size="mini" style="width:100%">
                <el-option v-for="item in typetykzlist" :label="item.Name" :value="item.FieldName" :key="item.FieldName"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="样本源名称">
              <el-input v-model="SourceName" placeholder="请输入样本源名称" size="mini" style="width:100%"></el-input>
            </el-form-item>
            <el-form-item label="录入人">
              <el-input v-model="CreateBy" placeholder="请输入录入人" size="mini" style="width:100%"></el-input>
            </el-form-item>
            <el-form-item label="特有检索">
              <el-input v-model="Stnotevalue" placeholder="输入检索内容" size="mini" style="width:100%"></el-input>
            </el-form-item>
            <el-form-item label="所属分组">
              <el-input v-model="GroupName" placeholder="输入所属分组" size="mini" style="width:100%"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="seachdata">查 询</el-button>
      </span>
    </el-dialog>

    <el-dialog title="选中显示列（拖拽可以实现排序）" :visible.sync="columndialogVisible" top="5vh">
      <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange" style="margin-left:15px;">全选</el-checkbox>
      <div style="margin: 10px 0;"></div>
      <draggable v-model="showcolumn">
        <transition-group class="sampshowfiledsort_ul sampshowfiledsort_ul_tags" tag="ul">
          <li v-for="item in showcolumn" :key="item.filed">
            <el-checkbox v-model="item.show" :label="item.filed" @change="checkedshowall()">{{item.name}}</el-checkbox>
          </li>
        </transition-group>
      </draggable>
      <div slot="footer" class="dialog-footer">
        <el-button @click="columndialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveshowfiled()">确 定</el-button>
      </div>
    </el-dialog>

<!--    <el-dialog title="自定义搜索" :visible.sync="searchDialogVisible" width="1000px" top="5vh">
      <el-form ref="form" inline label-width="120px">
        <el-row :gutter="0">
          <el-col :span="10">
            <el-form-item label="自定义搜索名称">
              <el-input v-model="searchTemplateName" placeholder="请输入自定义名称" style="width:80%">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <el-button @click="addSearchTab(searchTemplateName)">添加</el-button>
          </el-col>
        </el-row>
      </el-form>
      <el-row :gutter="0">
        <el-col :span="5">
          <div class="searchDialogLeftStyle">
            <el-tag v-for="tag in searchTemplates" :id="tag.Name" :key="tag.Name" closable class="reporttag reportselect"
              :onclick="'clickmodeltypetag(' + tag.Name + ')'" style="display:block;text-align:center;color:white;"
              @close="removeSearchTab(tag.Name)">
              <i class="el-icon-caret-right" v-if="tag.Name == currentSearchTemplateName"></i>
              {{tag.Name}}
            </el-tag>
          </div>
        </el-col>
        <el-col :span="19">
          <div class="searchDialogRightStyle">
            <el-form ref="form" inline label-width="0px">
              <el-row style="margin-top:10px;">
                <el-col :span="24" style="margin-left:10px;">{{">> "+currentSearchTemplateName}}</el-col>
              </el-row>
              <el-row style="margin-top:10px;margin-bottom:10px;">
                <el-col class="line" :span="24" style="background-color:lightgrey; line-height: 2px;">&nbsp;</el-col>
              </el-row>
              <el-row :gutter="1">
                <el-col :span="5">
                  <el-select v-model="searchField" @change="changeSearchField()" placeholder="请选择" style="margin-left:5px;margin-right:5px;">
                    <el-option v-for="item in searchcolumn" :key="item.field" :label="item.name" :value="item.filed"></el-option>
                  </el-select>
                </el-col>
                <el-col :span="8">
                  <el-input v-if="searchField == 'BarCode'" v-model="searchValue.BarCode" placeholder="请输入样本条码" style="margin-left:5px;display:inline-block;"></el-input>
                  <el-input v-else-if="searchField == 'SampleCode'" v-model="searchValue.SampleCode" placeholder="请输入样本编码"></el-input>
                  <el-input v-else-if="searchField == 'SourceName'" v-model="searchValue.SourceName" placeholder="请输入身份证号或姓名"></el-input>
                  <el-input v-else-if="searchField == 'InnerCode'" v-model="searchValue.InnerCode" placeholder="请输入样本内码"></el-input>
                  <el-input v-else-if="searchField == 'Name'" v-model="searchValue.Name" placeholder="请输入名称"></el-input>
                  <el-input v-else-if="searchField == 'CreateBy'" v-model="searchValue.CreateBy" placeholder="请输入录入人"></el-input>
                  <el-input v-else-if="searchField == 'GroupName'" v-model="searchValue.GroupName" placeholder="请输入所属分组"></el-input>
                  <el-date-picker v-else-if="searchField == 'ReceiveDate'" v-model="searchValue.CreateOn" type="daterange"
                    range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" style="width:100%"></el-date-picker>

                  <el-select v-else-if="searchField == 'SampleTypeName'" v-model="searchValue.SampleType" clearable
                    placeholder="请选择" @change="selsampletypeChange" style="width:100%">
                    <el-option v-for="item in sampletypes" :key="item.Id" :label="item.Name" :value="item.Name"></el-option>
                  </el-select>
                  <el-date-picker v-else-if="searchField == 'ValidityDate'" v-model="searchValue.Validity" type="daterange"
                    range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" style="width:100%">
                  </el-date-picker>
                  <el-input v-else-if="searchField == 'Capacity'" v-model="searchValue.Capacity" placeholder="请输入容量"></el-input>
                  <el-input v-else-if="searchField == 'Location'" v-model="searchValue.Location" placeholder=" 请输入存储位置"></el-input>
                  <el-input v-else v-model="searchValue.Extension" placeholder="" style="margin-left:5px;display:inline-block;"></el-input>
                </el-col>
                <el-col :span="3">
                  <el-select v-model="orAnd" placeholder="请选择" style="margin-left:15px;">
                    <el-option v-for="item in orAndData" :key="item.value" :label="item.name" :value="item.value"></el-option>
                  </el-select>
                </el-col>
                <el-col :span="3">
                  <el-button type="primary" size="middle" style="margin-left:5px;display:inline-block;" @click="addSearchField">添加</el-button>
                </el-col>
                <el-col :span="5">
                  <el-button type="primary" size="middle" style="display:inline-block;" @click="saveAndSearchWithTemplate">查询</el-button>
                  <el-button type="primary" size="middle" style="display:inline-block;" @click="saveSearchTemplate">保存</el-button>
                </el-col>
              </el-row>
              <el-row style="margin-top:10px;">
                <el-col class="line" :span="24" style="background-color:lightgrey; line-height: 2px;">&nbsp;</el-col>
              </el-row>
              <el-row>
                <el-table :data="searchTableData" border style="width: 100%">
                  <el-table-column prop="Name" label="检索名称" show-overflow-tooltip>
                  </el-table-column>
                  <el-table-column prop="Value" label="数值范围" width="300px" show-overflow-tooltip>
                  </el-table-column>
                  <el-table-column prop="Guanxi" label="查询关系" show-overflow-tooltip>
                  </el-table-column>
                  <el-table-column prop="Operate" label="操作" show-overflow-tooltip>
                    <template slot-scope="scope">
                      <el-button @click="deleteSearchField(scope.row)" type="text" size="small">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-row>
            </el-form>
          </div>
        </el-col>
      </el-row>
    </el-dialog>-->
    <!-- 自定义查询 -->
    <samplesearchdialog @close="closeDialog"
                        ref="samplesearchdialog"></samplesearchdialog>

  </div>
</template>
<script>
  import store from 'store'
  import {
    mapGetters
  } from 'vuex'
  import draggable from 'vuedraggable'
  import samplesearchdialog from '../../../components/samples/samplesearchdialog'
  export default {
    name: 'samplesunsave',
    computed: mapGetters({
      authUser: 'authUser'
    }),
    components: {
      draggable,
      samplesearchdialog
    },
    data () {
      return {
        dialogVisible: false,
        currentItemCount: 0, // 当前页显示数量
        currentPage: 1, // 当前页
        size: 200, // 每页显示数量
        list: [], // table显示数据集
        BarCode: '', // 样本条码
        SampleCode: '', // 样本编码
        SampleType: '', // 样本类型
        Stnotevalue: '', // 特有扩展检索值
        STNoteField: [], // 特有扩展名称
        CreateBy: '', // 录入人
        CreateOn: [], // 录入时期
        GroupName: '', // 所属分组
        Name: '', // 名称
        SourceName: '', // 样本来源
        InnerCode: '', // 样本内码
        dialogFormVisible: false, // 添加弹框是否显示
        showquerydiv: false,
        sampletypes: [], // 样本类型
        // 新增
        typetykzlist: [], // 特有扩展
        multipleSelection: [], // 多选框
        showcolumn: [], // 显示列
        cachecols: [],
        columndialogVisible: false, // 自定义显示列弹框
        isIndeterminate: false,
        checkAll: true,
        searchDialogVisible: false, // 自定义搜索弹框
        searchTemplateName: '自定义搜索1',
        searchTemplates: [],
        currentSearchTemplateName: '',
        searchField: 'BarCode',
        searchValue: {
          BarCode: '',
          SampleCode: '',
          SourceName: '',
          InnerCode: '',
          Name: '',
          CreateBy: '',
          SampleType: '',
          Validity: [],
          Capacity: '',
          Location: '',
          Extension: '',
          GroupName: '' // 所属分组
        },
        orAnd: 'and',
        orAndData: [{
          name: '并且',
          value: 'and'
        },
        {
          name: '或者',
          value: 'or'
        }
        ],
        searchTableData: [],
        searchcolumn: [], // 搜索列
        currentSearchTemplate: '',
        acc: ''
      }
    },
    created () {
      this.acc = this.authUser.Profile.AccCode
      if (this.$route.query.size && this.$route.query.currentPage) {
        this.size = parseInt(this.$route.query.size)
        this.currentPage = parseInt(this.$route.query.currentPage)

        let searchmodel = store.get('samplewaitstoreseach')
        if (typeof (searchmodel) !== 'undefined') {
          if (searchmodel.BarCode && searchmodel.BarCode !== '') { // 样本条码
            this.BarCode = searchmodel.BarCode
          }
          if (searchmodel.SampleCode && searchmodel.SampleCode !== '') { // 样本编码
            this.SampleCode = searchmodel.SampleCode
          }
          if (searchmodel.SourceName && searchmodel.SourceName !== '') { // 样本来源
            this.SourceName = searchmodel.SourceName
          }
          if (searchmodel.InnerCode && searchmodel.InnerCode !== '') { // 样本内码
            this.InnerCode = searchmodel.InnerCode
          }
          if (searchmodel.Name && searchmodel.Name !== '') { // 名称
            this.Name = searchmodel.Name
          }
          if (searchmodel.CreateBy && searchmodel.CreateBy !== '') { // 录入人
            this.CreateBy = searchmodel.CreateBy
          }
          if (searchmodel.CreateOn && searchmodel.CreateOn.length === 2) { // 录入日期
            this.CreateOn = [new Date(searchmodel.CreateOn[0]), new Date(searchmodel.CreateOn[1])]
          }
          if (searchmodel.SampleType && searchmodel.SampleType !== '') { // 样本类型
            this.SampleType = searchmodel.SampleType
            this.searchsampletypeChange()
          }
          if (searchmodel.STNoteField && searchmodel.STNoteField.length > 0) { // 特有扩展
            this.STNoteField = searchmodel.STNoteField
          }
          if (searchmodel.Stnotevalue && searchmodel.Stnotevalue !== '') { // 特有检索内容
            this.Stnotevalue = searchmodel.Stnotevalue
          }
          if (searchmodel.Validity && searchmodel.Validity.length === 2) { // 有效日期
            this.Validity = [new Date(searchmodel.Validity[0]), new Date(searchmodel.Validity[1])]
          }
          if (searchmodel.GroupName && searchmodel.GroupName !== '') { // 所属分组
            this.GroupName = searchmodel.GroupName
          }
        }
      } else {
        store.set('samplewaitstoreseach', '')
      }

      this.cachecols = store.get('samplewaitstoreshowcolumn')
      // 当前显示列无数据，使用已录入样本显示列数据
      if (!(this.cachecols && this.cachecols !== '')) {
        this.cachecols = store.get('sapminputshowcolumn')
      }
      if (this.cachecols && this.cachecols !== '') {
        this.showcolumn = this.cachecols
      } else {
        this.showcolumn = [{
          filed: 'BarCode',
          name: '样本条码',
          show: true,
          kuoz: false
        }, {
          filed: 'SampleCode',
          name: '样本编码',
          show: true,
          kuoz: false
        }, {
          filed: 'SourceName',
          name: '样本来源',
          show: true,
          kuoz: false
        }, {
          filed: 'Genus',
          name: '蜂种名称',
          show: true,
          kuoz: false
        }, {
          filed: 'AddressName',
          name: '取样地区',
          show: true,
          kuoz: false
        }, {
          filed: 'SurveyDate',
          name: '采样日期',
          show: true,
          kuoz: false
        }, {
          filed: 'Name',
          name: '名称',
          show: true,
          kuoz: false
        }, {
          filed: 'SampleTypeName',
          name: '样本类型',
          show: true,
          kuoz: false
        }, {
          filed: 'Capacity',
          name: '可用容量',
          show: true,
          kuoz: false
        }, {
          filed: 'InnerCode',
          name: '样本内码',
          show: true,
          kuoz: false
        }, {
          filed: 'ValidityDate',
          name: '有效日期',
          show: true,
          kuoz: false
        }, {
          filed: 'ReceiveDate',
          name: '接收日期',
          show: true,
          kuoz: false
        }, {
          filed: 'CreateBy',
          name: '录入人',
          show: true,
          kuoz: false
        }, {
          filed: 'GroupName',
          name: '所属分组',
          show: true,
          kuoz: false
        }]
      }
      this.getextends()
      this.checkedshowall()
      this.getAllSearchTab()
    },
    mounted () {
      let _this = this
      window.clickmodeltypetag = function (val, e) {
        _this.clickmodeltypetag(val)
      }
    },
    methods: {
      initData () {
        this.currentSearchTemplate = ''
        let _this = this
        let params = {
          _currentPage: this.currentPage,
          _size: this.size,
          BarCode: this.BarCode,
          SampleCode: this.SampleCode,
          SampleType: this.SampleType,
          Stnotevalue: this.Stnotevalue,
          STNoteField: this.STNoteField,
          Noteitemvalue: this.Noteitemvalue,
          Noteitem: this.Noteitem,
          CreateBy: this.CreateBy,
          SourceName: this.SourceName,
          Name: this.Name,
          Validity: this.Validity,
          CreateOn: this.CreateOn,
          InnerCode: this.InnerCode,
          GroupName: _this.GroupName
        }
        if (this.CreateOn && this.CreateOn.length === 2) {
          let params2 = {
            CreateOnstart: this.CreateOn[0] / 1000,
            CreateOnend: this.CreateOn[1] / 1000
          }
          params = Object.assign(params, params2)
        }
        // 返回时保存查找内容
        store.set('samplewaitstoreseach', params)
        this.$axios.get('/samplesunsave/animallist', {
          params
        })
          .then(res => {
            _this.list = res.data.items
            _this.currentItemCount = res.data.currentItemCount
          })
          .catch(err => {
            console.error(err)
          })
      },
      // 根据子code获取所有父code
      getparentcodebytopcode (v) {
        let _this = this
        _this.$axios.get('/sampleorgan/getparentcodebytopcode/' + v, {})
          .then(res => {
            _this.selectedzuzhi = []
            let pidarr = res.data.split(',')
            for (var i = pidarr.length - 1; i >= 0; i--) {
              if (pidarr[i] !== '0') {
                _this.selectedzuzhi.push(pidarr[i])
              }
            }
            _this.searchzuzhitreehandleChange()
          })
      },
      getextends () {
        let _this = this
        this.$axios.get('/sampleinput/getsampletype', {
          _currentPage: -1
        })
          .then(res => {
            _this.sampletypes = res.data.items
            if (store.get('samplewaitstoreseach').searchWithTemplate && store.get('samplewaitstoreseach').searchWithTemplate !==
              '') { // 自定义查询
              this.handleSearchCommand(store.get('samplewaitstoreseach').searchWithTemplate)
            } else {
              this.initData()
            }
          }).catch(() => {})
      },
      seachdata () {
        this.currentPage = 1
        this.initData()
      },
      selsampletypeChange () {
        // 获取特有扩展
        let _this = this
        if (_this.SampleType !== '') {
          _this.$axios.get('/sampletype/gettykzzd?SampleType=' + _this.SampleType, {})
            .then(res => {
              _this.STNoteField = []
              _this.typetykzlist = res.data
            })
        }
      },
      // 返回查询条件执行
      searchsampletypeChange () {
        // 获取特有扩展
        let _this = this
        if (_this.SampleType !== '') {
          _this.$axios.get('/sampletype/gettykzzd?SampleType=' + _this.SampleType, {})
            .then(res => {
              _this.typetykzlist = res.data
            })
        }
      },
      // ---------------------------------------------------
      // 自定义显示列
      checkedshowall () {
        let tc = 0
        for (var i = 0; i < this.showcolumn.length; i++) {
          if (this.showcolumn[i].show) {
            tc++
          }
        }
        if (tc > 0 && tc < this.showcolumn.length) {
          this.isIndeterminate = true
          this.checkAll = false
        } else {
          this.isIndeterminate = false
          if (tc === 0) {
            this.checkAll = false
          } else {
            this.checkAll = true
          }
        }
      },
      handleCheckAllChange (val) {
        for (var i = 0; i < this.showcolumn.length; i++) {
          this.showcolumn[i].show = val
        }
      },
      // 自定义显示列保存操作
      saveshowfiled () {
        store.set('samplewaitstoreshowcolumn', this.showcolumn)
        this.columndialogVisible = false
        this.$message({
          type: 'success',
          message: '自定义显示列设置成功'
        })
        this.initData()
      },
      header_dragend (newWidth, oldWidth, column, event) {
        for (var i = 0; i < this.showcolumn.length; i++) {
          if (this.showcolumn[i].name === column.label) {
            this.showcolumn[i].columnwidth = newWidth
            store.set('samplewaitstoreshowcolumn', this.showcolumn)
            return
          }
        }
      },
      // ----------------------------------------------------------------
      // 自定义查询
      handleSearchCommand (command) {
        if (command == 'search') {
          this.dialogVisible = true
        } else if (command == 'clear') {
          this.clearSearch()
        } else if (command == '编辑') {
        /*  this.searchDialogVisible = true
          this.searchcolumn = this.showcolumn.filter(function (e) {
            return e.filed != "Location"
          }) */
          this.$refs.samplesearchdialog.creatpage()
          this.$refs.samplesearchdialog.samplesearchdialogVisable = true
        } else {
          this.currentSearchTemplate = command
          let searchmodel = {
            searchWithTemplate: command
          }
          store.set('samplewaitstoreseach', searchmodel)
          this.searchWithTemplate(command)
        }
      },
      // 添加自定义搜索
      addSearchTab (name) {
        for (let i = 0; i < this.searchTemplates.length; i++) {
          if (this.searchTemplates[i].Name == name) {
            this.$message('名称已经存在')
            return
          }
        }
        this.searchTemplates.push({
          Name: name,
          Fields: []
        }),
        this.currentSearchTemplateName = name

        for (let i = 0; i < this.searchTemplates.length; i++) {
          if (this.searchTemplates[i].Name == this.currentSearchTemplateName) {
            this.searchTableData = this.getSearchTableData(this.searchTemplates[i].Fields)
          }
        }
      },
      removeSearchTab (targetName) {
        let _this = this
        this.$axios.delete('/sampleinput/searchTemplate?name=' + targetName, {})
          .then(res => {
            if (res.data.code == 0) {
              let tabs = _this.searchTemplates
              let activeName = _this.currentSearchTemplateName
              if (activeName === targetName) {
                tabs.forEach((tab, index) => {
                  if (tab.Name === targetName) {
                    let nextTab = tabs[index + 1] || tabs[index - 1]
                    if (nextTab) {
                      activeName = nextTab.Name
                      _this.searchTableData = this.getSearchTableData(nextTab.Fields)
                    }
                  }
                })
              }

              _this.currentSearchTemplateName = activeName
              _this.searchTemplates = tabs.filter(tab => tab.Name !== targetName)
            } else {
              _this.$message({
                type: 'warning',
                message: res.data.message
              })
            }
          })
          .catch(err => {
            console.error(err)
          })
      },
      // 添加自定义搜索详情
      addSearchField () {
        let searchValue
        for (let k in this.searchValue) {
          if (typeof this.searchValue[k] === 'number') {
            searchValue = this.searchValue[k]
            break
          } else if (this.searchValue[k] && this.searchValue[k].length > 0) {
            searchValue = this.searchValue[k]
            break
          }
        }

        if (!searchValue) {
          this.$message('请输入检索数值或范围')
          return
        }

        let s = ''
        if (searchValue instanceof Array && searchValue.length > 0) {
          if (searchValue[0] instanceof Date) {
            let arr = []
            for (let j = 0; j < searchValue.length; j++) {
              arr.push(this.formatDateTime(searchValue[j]))
            }
            s = arr.join('--')
          } else {
            s = searchValue[searchValue.length - 1]
          }
        } else {
          s = searchValue
        }

        for (let i = 0; i < this.searchTemplates.length; i++) {
          if (this.searchTemplates[i].Name == this.currentSearchTemplateName) {
            for (let index in this.searchTemplates[i].Fields) {
              let field = this.searchTemplates[i].Fields[index]
              if (field.Field == this.searchField && field.Value == this.searchValue && field.OrAnd == this.orAnd) {
                this.$message('此查询条件已经存在')
                return
              }
            }

            this.searchTemplates[i].Fields.push({
              Field: this.searchField,
              Value: s + '',
              OrAnd: this.orAnd,
              Name: this.getFieldName(this.searchField)
            })
            this.searchTableData = this.getSearchTableData(this.searchTemplates[i].Fields)
            break
          }
        }
      },
      // 查询自定义搜索详情
      saveAndSearchWithTemplate () {
        let _this = this
        this.saveSearchTemplate(function () {
          _this.currentSearchTemplate = _this.currentSearchTemplateName
          _this.searchWithTemplate(_this.currentSearchTemplateName)
        })
      },
      // 保存自定义搜索详情
      saveSearchTemplate (cb) {
        let _this = this
        let template = JSON.stringify(this.searchTableData)
        this.$axios.put('/sampleinput/searchTemplate?name=' + this.currentSearchTemplateName, template)
          .then(res => {
            if (res.data.code == 0) {
              _this.$message({
                type: 'success',
                message: res.data.message
              })
              if (cb) {
                cb()
              }
            } else {
              _this.$message({
                type: 'warning',
                message: res.data.message
              })
            }
          })
          .catch(err => {
            console.error(err)
          })
      },
      deleteSearchField (v) {
        if (v.Name) {
          for (let i = 0; i < this.searchTemplates.length; i++) {
            if (this.searchTemplates[i].Name == this.currentSearchTemplateName) {
              this.searchTemplates[i].Fields = this.searchTemplates[i].Fields.filter(function (ele) {
                return !(ele.Value == v.Value && ele.Field == v.Field && ele.OrAnd == v.OrAnd)
              })
              this.searchTableData = this.getSearchTableData(this.searchTemplates[i].Fields)
              break
            }
          }
        }
      },
      // 关闭自定义查询
      closeDialog () {
        this.getAllSearchTab()
      },
      searchWithTemplate (name) {
        console.log(name)
        this.searchDialogVisible = false

        let params = {
          _currentPage: this.currentPage,
          _size: this.size

        }
        let _this = this
        this.$axios.get('/samplesunsave/search?name=' + name, {
          params
        })
          .then(res => {
            console.log(res.data.items)
            if (res.data.items) {
              _this.list = res.data.items
              _this.currentItemCount = res.data.currentItemCount
            }
          })
          .catch(err => {
            console.error(err)
          })
      },
      getSearchTableData (searchFields) {
        let data = searchFields.map(function (ele) {
          if (ele['OrAnd'] == 'or') {
            ele['Guanxi'] = '或者'
          } else {
            ele['Guanxi'] = '并且'
          }
          return ele
        })

        return data || []
      },
      clickmodeltypetag (val) {
        this.currentSearchTemplateName = val.getAttribute('id')
        for (let i = 0; i < this.searchTemplates.length; i++) {
          if (this.searchTemplates[i].Name == this.currentSearchTemplateName) {
            this.searchTableData = this.getSearchTableData(this.searchTemplates[i].Fields)
          }
        }
      },
      getAllSearchTab () {
        let _this = this
        this.$axios.get('/sampleinput/searchTemplate', {})
          .then(res => {
            if (res.data && res.data.items && res.data.items.length > 0) {
              _this.searchTemplates = res.data.items.map(function (e) {
                e.Fields = JSON.parse(e.Template)
                return e
              })
              _this.currentSearchTemplateName = _this.searchTemplates[0].Name
              _this.searchTableData = this.getSearchTableData(this.searchTemplates[0].Fields)
            } else {
              // _this.$message({
              //   type: 'warning',
              //   message: res.data.message,
              // })
            }
          })
          .catch(err => {
            console.error(err)
          })
      },
      changeSearchField (val) {
        this.searchValue = {
          BarCode: '',
          SampleCode: '',
          SourceName: '',
          InnerCode: '',
          Name: '',
          CreateBy: '',
          CreateOn: [],
          selectedzuzhi: [],
          SamplingSite: '',
          SampleType: '',
          Validity: [],
          Capacity: '',
          Location: '',
          Extension: '',
          GroupName: ''
        }
      },
      getFieldName (field) {
        for (let i = 0; i < this.showcolumn.length; i++) {
          if (this.showcolumn[i].filed == field) {
            return this.showcolumn[i].name
          }
        }
        return ''
      },
      // ----------------------------------------------------------------
      // 批量复存
      batchsave () {
        let _this = this
        if (_this.multipleSelection.length < 1) {
          _this.$message({
            type: 'warning',
            message: '请选择要批量复存的样本'
          })
          return
        } else {
          let flage = 0
          let message = ''
          for (let index = 0; index < _this.multipleSelection.length; index++) {
            if (_this.multipleSelection[index].IState !== 5) {
              message += _this.multipleSelection[index].BarCode + ' '
              flage = 1
            }
          }
          if (flage == 1) {
            _this.$message({
              type: 'warning',
              message: '所选样本中包含无位置信息的样本:' + message
            })
            return
          }
        }
        this.$axios.put('/samplesunsave/batchresample', _this.multipleSelection)
          .then(res => {
            if (res.data.code == 0) {
              _this.$message({
                type: 'success',
                message: res.data.message
              })
            } else {
              _this.$message({
                type: 'warning',
                message: res.data.message
              })
            }
            _this.initData()
          })
          .catch(err => {
            console.error(err)
          })
      },
      // 清空查询数据
      clearSearch () {
        this.BarCode = ''
        this.SampleCode = ''
        this.SourceName = ''
        this.InnerCode = ''
        this.Name = ''
        this.CreateBy = ''
        this.CreateOn = []
        this.SampleType = ''
        this.STNoteField = ''
        this.Stnotevalue = ''
        this.Validity = []
        this.Noteitem = []
        this.Noteitemvalue = ''
        this.currentPage = 1
        this.GroupName = ''
        this.initData()
      },
      // 导出样本
      handleExportsamplesCommand (command) {
        let _this = this
        if (command == 'exportchosen') { // 导出所选数据
          if (_this.multipleSelection.length < 1) {
            _this.$message({
              type: 'warning',
              message: '请选择要导出的样本'
            })
            return
          }
          _this.exportsamples('exportchosen')
        } else if (command == 'exportpage') { // 导出当前页数据
          if (_this.list.length < 1) {
            _this.$message({
              type: 'warning',
              message: '当前页无样本'
            })
            return
          }
          _this.exportsamples('exportpage')
        } else if (command == 'exportall') { // 导出所有数据
          _this.$confirm('此操作将导出所有满足条件的数据！是否继续导出?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'info'
          }).then(() => {
            _this.exportsamples()
          }).catch(() => {})
        }
      },
      exportsamples (val) {
        let _this = this
        // 显示列
        let showcolumnarr = []
        let showcolumnnamearr = []
        let id = ''
        for (var i = 0; i < _this.showcolumn.length; i++) {
          if (_this.showcolumn[i].show) {
            showcolumnarr.push(_this.showcolumn[i].filed)
            showcolumnnamearr.push(_this.showcolumn[i].name.replace(/,/g, '，'))
          }
        }
        let params = {
          _currentPage: this.currentPage,
          _size: this.size,
          BarCode: this.BarCode,
          SampleCode: this.SampleCode,
          SampleType: this.SampleType,
          Stnotevalue: this.Stnotevalue,
          STNoteField: this.STNoteField,
          Noteitemvalue: this.Noteitemvalue,
          Noteitem: this.Noteitem,
          CreateBy: this.CreateBy,
          SourceName: this.SourceName,
          Name: this.Name,
          Validity: this.Validity,
          InnerCode: this.InnerCode,
          GroupName: this.GroupName,
          showcolumnarr: showcolumnarr + '',
          showcolumnnamearr: showcolumnnamearr + '',
          ExportFlag: 'waitingstore'
        }
        if (this.CreateOn && this.CreateOn.length === 2) {
          let params2 = {
            CreateOnstart: this.CreateOn[0] / 1000,
            CreateOnend: this.CreateOn[1] / 1000
          }
          params = Object.assign(params, params2)
        }
        if (_this.Validity && _this.Validity.length === 2) {
          let params3 = {
            Validitystart: _this.Validity[0] / 1000,
            Validityend: _this.Validity[1] / 1000
          }
          params = Object.assign(params, params3)
        }
        // 导出所选样本
        if (val == 'exportchosen') {
          for (var i = 0; i < _this.multipleSelection.length; i++) {
            if (i == _this.multipleSelection.length - 1) {
              id += _this.multipleSelection[i].Id
            } else {
              id += _this.multipleSelection[i].Id + ','
            }
          }
          let paramsid = {
            Id: id
          }
          params = Object.assign(params, paramsid)
        }
        // 导出当前页样本
        if (val == 'exportpage') {
          for (var i = 0; i < _this.list.length; i++) {
            if (i == _this.list.length - 1) {
              id += _this.list[i].Id
            } else {
              id += _this.list[i].Id + ','
            }
          }
          let paramsid = {
            Id: id
          }
          params = Object.assign(params, paramsid)
        }
        _this.$axios.get('/sampleinput/exportexcel', {
          params
        })
          .then(res => {
            window.location = 'http://' + res.data
          })
          .catch(err => {
            console.error(err)
          })
      },
      // 样本条码批量打印
      batchprint () {
        let _this = this
        if (_this.multipleSelection.length < 1) {
          _this.$message({
            type: 'warning',
            message: '请选择要批量打印的样本'
          })
          return
        }
        this.$axios.get('/printscheme/getdefaultprintscheme', {})
          .then(res => {
            if (res.data && res.data !== '') {
              let idstring = ''
              for (var i = 0; i < _this.multipleSelection.length; i++) {
                idstring += _this.multipleSelection[i].Id + ';'
              }
              idstring = idstring.substring(0, idstring.length - 1)
              // 执行打印操作
              window.PrintReport(res.data, `animalsamplesbatch,${this.authUser.Profile.AccCode},${idstring}`)
            } else {
              _this.$message({
                type: 'warning',
                message: '未设置默认打印方案，可在"系统设置"-"打印方案"中进行设置！'
              })
            }
          })
          .catch(err => {
            // handle error
            console.error(err)
          })
      },
      handleSizeChange (value) {
        this.size = value
        this.currentPage = 1
        if (this.currentSearchTemplate) {
          this.searchWithTemplate(this.currentSearchTemplate)
        } else {
          this.initData()
        }
      },
      handleCurrentChange (value) {
        this.currentPage = value
        if (this.currentSearchTemplate) {
          this.searchWithTemplate(this.currentSearchTemplate)
        } else {
          this.initData()
        }
      },
      handleSelectionChange (val) {
        this.multipleSelection = val
      },
      handleChange (value) {
        console.log(value)
      },
      jstimehandle (val) {
        if (val === '') {
          return '----'
        } else if (val === '0001-01-01T08:00:00+08:00') {
          return '----'
        } else if (val === '5000-01-01T23:59:59+08:00') {
          return '永久'
        } else {
          val = val.replace('T', ' ')
          return val.substring(0, 19)
        }
      },
      Jstimehandle (val) {
        if (val === '') {
          return '----'
        } else if (val === '0001-01-01T08:00:00+08:00') {
          return '----'
        } else if (val === '5000-01-01T23:59:59+08:00') {
          return '永久'
        } else {
          val = val.replace('T', ' ')
          return val.substring(0, 10)
        }
      }
    }
  }
</script>

<style lang="scss">
  .el-pagination {
    margin: 1rem 0 2rem;
    text-align: right;
  }

  .sampshowfiledsort_ul_tags {
    padding-left: 12px;
    margin-top: -5px;
  }

  .sampshowfiledsort_ul_tags:after {
    clear: both;
    content: '';
    display: block;
  }

  .sampshowfiledsort_ul_tags li {
    color: #fff;
    float: left;
    margin: 2px 2px 3px 0;
    padding: 3px 3px;
    min-width: 15px;
    font-size: 16px;
    text-align: center;
    cursor: move;
    transition: all 1s;
    list-style-type: none;
  }

</style>