biobank/src/dashoo.cn/frontend_web/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' && acc != 'sBBo4' && acc !='ssqOy' && acc != 'saB4v'">
              <router-link :to="'/biobank/source/'+ scope.row.SourceId + '/sourceinfo?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 === 'SourceName' && (acc == 'sBBo4' || acc == 'saB4v')">
              <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 === 'SourceName' && acc == 'ssqOy'">
              <router-link :to="'/biobank/source/'+ scope.row.SourceId + '/sourcemicinfo?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 === 'Location'">
              <router-link :to="'/equipment/'+scope.row.EquipmentId +'/manage' + 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, 15, 20]" :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-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-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-select v-model="Noteitem" multiple placeholder="请选择" size="mini" style="width:100%">
                <el-option v-for="item in publicsampletypes" :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="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-cascader :options="zuzhitreelist" :props="sampinputtreeprops" change-on-select :show-all-levels="false"
                v-model="selectedzuzhi" @change="zuzhitreehandleChange" placeholder="请选择组织" size="mini" style="width:100%"></el-cascader>
            </el-form-item>
            <el-form-item label="特有扩展">
              <el-select v-model="STNoteField" multiple 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-form-item label="公共检索">
              <el-input v-model="Noteitemvalue" placeholder="请输入检索内容" size="mini" style="width:100%"></el-input>
            </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-select v-model="SamplingSite" clearable placeholder="请选择" size="mini" style="width:100%">
                <el-option v-for="item in samplesitenames" :label="item.Name" :value="item.Code" :key="item.Code"></el-option>
              </el-select>
            </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-cascader v-else-if="searchField == 'SamplingOrganName'" :options="zuzhitreelist" :props="sampinputtreeprops2"
                    change-on-select :show-all-levels="false" v-model="searchValue.selectedzuzhi" @change="zuzhitreehandleChange2"
                    placeholder="请选择组织" style="width:100%">
                  </el-cascader>
                  <span v-else-if="searchField == 'SamplingSiteName'">
                    <el-cascader :options="zuzhitreelist" :props="sampinputtreeprops" change-on-select :show-all-levels="false"
                      v-model="selectedzuzhi2" @change="zuzhitreehandleChange2" placeholder="请选择组织" style="width:50%">
                    </el-cascader>
                    <el-select v-model="searchValue.SamplingSite" clearable placeholder="请选择" style="width:45%;margin-left:5px;">
                      <el-option v-for="item in samplesitenames2" :key="item.Code" :label="item.Name" :value="item.Name"></el-option>
                    </el-select>
                  </span>
                  <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>

  </div>
</template>
<script>
  import store from 'store'
  import {
    mapGetters
  } from 'vuex'
  import draggable from 'vuedraggable'
  export default {
    name: 'samplesunsave',
    computed: mapGetters({
      authUser: 'authUser'
    }),
    components: {
      draggable
    },
    data() {
      return {
        dialogVisible: false,
        currentItemCount: 0, // 当前页显示数量
        currentPage: 1, // 当前页
        size: 10, // 每页显示数量
        list: [], // table显示数据集
        BarCode: '', // 样本条码
        SampleCode: '', // 样本编码
        SampleType: '', // 样本类型
        SamplingSite: '', // 取材部位
        Stnotevalue: '', // 特有扩展检索值
        STNoteField: [], // 特有扩展名称
        Noteitemvalue: '', // 公共扩展检索值
        Noteitem: [], // 公共扩展名称
        selectsigorg: '', // 组织器官
        CreateBy: '', // 录入人
        CreateOn: [], // 录入时期
        GroupName: '', //所属分组
        Name: '', // 名称
        SourceName: '', // 样本来源
        InnerCode: '', // 样本内码
        dialogFormVisible: false, // 添加弹框是否显示
        showquerydiv: false,
        publicsampletypedata: [], // 样本公共扩展
        sampletypes: [], // 样本类型
        zuzhitreelist: [], // 组织器官
        samplesitenames: [], // 取材部位
        publicsampletypes: [], // 公共拓展
        sampinputtreeprops: {
          value: 'code',
          label: 'name',
          children: 'children'
        },
        selectedzuzhi: [],
        // 新增
        organlist: [],
        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: '',
          CreateOn: [],
          selectedzuzhi: [],
          SamplingSite: '',
          SampleType: '',
          Validity: [],
          Capacity: '',
          Location: '',
          Extension: '',
          GroupName: '', //所属分组
        },
        sampinputtreeprops2: {
          value: 'name',
          label: 'name',
          children: 'children'
        },
        selectedzuzhi2: [],
        samplesitenames2: [], // 取材部位
        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.SamplingOrgan && searchmodel.SamplingOrgan !== '') { //组织器官
            this.selectsigorg = searchmodel.SamplingOrgan
            this.getparentcodebytopcode(searchmodel.SamplingOrgan)
            // this.selectedzuzhi=searchmodel.SamplingOrgan
          }
          if (searchmodel.SamplingSite && searchmodel.SamplingSite !== '') { //取材部位
            this.SamplingSite = searchmodel.SamplingSite
          }
          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.Noteitem && searchmodel.Noteitem.length > 0) { //公有扩展
            this.Noteitem = searchmodel.Noteitem
          }
          if (searchmodel.Noteitemvalue && searchmodel.Noteitemvalue !== '') { //公共检索内容
            this.Noteitemvalue = searchmodel.Noteitemvalue
          }
          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: 'Name',
          name: '名称',
          show: true,
          kuoz: false
        }, {
          filed: 'SampleTypeName',
          name: '样本类型',
          show: true,
          kuoz: false
        }, {
          filed: 'Capacity',
          name: '可用容量',
          show: true,
          kuoz: false
        }, {
          filed: 'SamplingOrganName',
          name: '组织器官',
          show: true,
          kuoz: false
        }, {
          filed: 'SamplingSiteName',
          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.getOrgan()
      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,
          SamplingSite: this.SamplingSite,
          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,
          SamplingOrgan: this.selectsigorg,
          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/list', {
            params
          })
          .then(res => {
            // response
            _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()
          })
      },
      getOrgan() {
        if (this.organlist.length === 0) {
          let _this = this
          _this.$axios.get('/shelfset/getorgan', {})
            .then(res => {
              // response
              _this.organlist = res.data.items
            })
        }
      },
      getextends() {
        let _this = this
        this.$axios.get('/sampleinput/getsampletype', {
            _currentPage: -1
          })
          .then(res => {
            _this.sampletypes = res.data.items
          }).catch(() => {})
        this.$axios.get('/sampleinput/getpublicsampletype', {
            _currentPage: -1
          })
          .then(res => {
            _this.publicsampletypes = res.data.items
            // 扩展列增加到显示列中
            if (!(this.cachecols && this.cachecols !== '')) {
              for (let i = 0; i < _this.publicsampletypes.length; i++) {
                _this.showcolumn.push({
                  filed: _this.publicsampletypes[i].FieldName,
                  name: _this.publicsampletypes[i].Name,
                  show: true,
                  kuoz: true
                })
              }
            } else {
              // 新增和修改
              for (let i = 0; i < _this.publicsampletypes.length; i++) {
                let matchindex = -1
                for (let j = 0; j < _this.showcolumn.length; j++) {
                  if (_this.showcolumn[j].filed === _this.publicsampletypes[i].FieldName && _this.showcolumn[j].kuoz) {
                    matchindex = j
                    break
                  }
                }
                if (matchindex >= 0) {
                  _this.showcolumn[matchindex] = {
                    filed: _this.publicsampletypes[i].FieldName,
                    name: _this.publicsampletypes[i].Name,
                    show: _this.showcolumn[matchindex].show,
                    kuoz: true,
                    columnwidth: _this.showcolumn[matchindex].columnwidth
                  }
                } else {
                  _this.showcolumn.push({
                    filed: _this.publicsampletypes[i].FieldName,
                    name: _this.publicsampletypes[i].Name,
                    show: true,
                    kuoz: true
                  })
                }
              }
              // 删除
              let showcolumntemp = _this.showcolumn
              _this.showcolumn = []
              for (let j = 0; j < showcolumntemp.length; j++) {
                if (!showcolumntemp[j].kuoz) {
                  _this.showcolumn.push(showcolumntemp[j])
                } else {
                  for (let i = 0; i < _this.publicsampletypes.length; i++) {
                    if (showcolumntemp[j].filed === _this.publicsampletypes[i].FieldName) {
                      _this.showcolumn.push(showcolumntemp[j])
                      break
                    }
                  }
                }
              }
            }
            if (store.get('samplewaitstoreseach').searchWithTemplate && store.get('samplewaitstoreseach').searchWithTemplate !==
              '') { //自定义查询
              this.handleSearchCommand(store.get('samplewaitstoreseach').searchWithTemplate)
            } else {
              // initial data
              this.initData()
            }
          }).catch(() => {})
        this.$axios.get('/sampleinput/getoperations', {
            _currentPage: -1
          })
          .then(res => {
            _this.zuzhitreelist = window.toolfun_gettreejson(res.data.items, 'id', 'pId', 'id,name,code')
          }).catch(() => {})
      },
      seachdata() {
        // selectedzuzhi
        if (this.selectedzuzhi.length > 0) {
          this.selectsigorg = this.selectedzuzhi[this.selectedzuzhi.length - 1] + ''
        }
        this.currentPage = 1
        this.initData()
      },
      selsampletypeChange() {
        // 获取特有扩展
        let _this = this
        if (_this.SampleType !== '') {
          _this.$axios.get('/sampletype/gettykzzd?SampleType=' + _this.SampleType, {})
            .then(res => {
              // response
              _this.STNoteField = []
              _this.typetykzlist = res.data
            })
        }
      },
      //返回查询条件执行
      searchsampletypeChange() {
        // 获取特有扩展
        let _this = this
        if (_this.SampleType !== '') {
          _this.$axios.get('/sampletype/gettykzzd?SampleType=' + _this.SampleType, {})
            .then(res => {
              // response
              _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"
          })
        } 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 => {
            // handle error
            console.error(err)
          })
      },
      zuzhitreehandleChange2(value) {
        if (this.selectedzuzhi2.length > 0) {
          let selectsigorg = this.selectedzuzhi2[this.selectedzuzhi2.length - 1] + ''
          this.$axios.get('/samplesite/getsitebyfcode?code=' + selectsigorg, {})
            .then(res => {
              this.searchValue.SamplingSite = ''
              this.samplesitenames2 = res.data
            }).catch(() => {})
        }
      },
      //添加自定义搜索详情
      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 => {
            // handle error
            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
            }
          }
        }
      },
      searchWithTemplate(name) {
        console.log(name)
        this.searchDialogVisible = false

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

        }
        let _this = this
        // request
        this.$axios.get('/samplesunsave/search?name=' + name, {
            params
          })
          .then(res => {
            console.log(res.data.items)
            // response
            if (res.data.items) {
              _this.list = res.data.items
              // toggle loading
              _this.currentItemCount = res.data.currentItemCount
            }
          })
          .catch(err => {
            // handle error
            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 => {
            // handle error
            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 => {
            // handle error
            console.error(err)
          })
      },
      //清空查询数据
      clearSearch() {
        this.BarCode = ''
        this.SampleCode = ''
        this.SourceName = ''
        this.InnerCode = ''
        this.Name = ''
        this.CreateBy = ''
        this.CreateOn = []
        this.selectsigorg = ''
        this.selectedzuzhi = []
        this.SamplingSite = ''
        this.SampleType = ''
        this.STNoteField = ''
        this.Stnotevalue = ''
        this.Validity = []
        this.Noteitem = []
        this.Noteitemvalue = ''
        this.currentPage = 1
        this.GroupName = ''
        this.initData()
      },
      zuzhitreehandleChange(value) {
        if (this.selectedzuzhi.length > 0) {
          this.selectsigorg = this.selectedzuzhi[this.selectedzuzhi.length - 1] + ''
          this.$axios.get('/samplesite/getsitebyfcode?code=' + this.selectsigorg, {})
            .then(res => {
              this.SamplingSite = ''
              this.samplesitenames = res.data
            }).catch(() => {})
        }
      },
      //返回查询条件执行
      searchzuzhitreehandleChange(value) {
        if (this.selectedzuzhi.length > 0) {
          this.selectsigorg = this.selectedzuzhi[this.selectedzuzhi.length - 1] + ''
          this.$axios.get('/samplesite/getsitebyfcode?code=' + this.selectsigorg, {})
            .then(res => {
              this.samplesitenames = res.data
            }).catch(() => {})
        }
      },
      //导出样本
      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,
          SamplingSite: this.SamplingSite,
          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,
          SamplingOrgan: this.selectsigorg,
          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 => {
            // handle error
            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, `samplesbatch,${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)
        }
      },
    }
  }

</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>