udiwms-vue-frame/src/views/collect/IoCollectCodeSelect.vue

<template>
  <div>
    <el-card>
      <el-form v-if="queryList && queryList.length > 0 && showSearch" :model="filterQuery" class="query-form"
               size="mini" label-width="100px"
      >
        <el-col :span="20">
          <el-form-item prop="code" label="扫描追溯码:">
            <el-input
              ref="inputRef"
              @focus="getInputFocus($event)"
              @keypress.enter.native="enterKey($event)"
              placeholder="扫描或者输入追溯码"
              style="ime-mode: disabled"
              v-model="filterQuery.code"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
        <template v-for="(item, index) in queryList">
          <el-form-item v-if="item.columnType == 'input' && executeEval(row,item.expression,true)"
                        class="query-form-item"
                        :label="item.columnDesc+`:`" :key="item.id"
          >
            <el-input
              v-model="filterQuery[item.columnName]"
              :placeholder="item.columnDesc"
              :disabled="executeEval(null,item.disabledFuc,false)"
              @keyup.enter.native="executeFuc($event,'5',item.clickFuc)"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item v-if="item.columnType == 'select' && executeEval(row,item.expression,true)"
                        class="query-form-item"
                        :label="item.columnDesc+`:`"
          >
            <el-select v-model="filterQuery[item.columnName]"
                       :placeholder="item.columnDesc"
                       :disabled="executeEval(null,item.disabledFuc,false)"
                       clearable
            >
              <el-option
                v-for="dict in item.lableRuleObj"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item v-if="item.columnType == 'selectServer' && executeEval(row,item.expression,true)"
                        class="query-form-item"
                        :label="item.columnDesc+`:`"
          >
            <el-select
              v-model="filterQuery[item.columnName]"
              :placeholder="item.columnDesc"
              @change="executeFuc($event,'5',item.checkRules)"
              :disabled="executeEval(null,item.disabledFuc,false)"
              filterable
              remote
              :remote-method="(query) => executeFuc(query,'5',item.clickFuc)"
              clearable
            >
              <el-option
                v-for="item in options[item.clickFuc]"
                :key="item.code"
                :label="item.label"
                :value="item.code"
              />
            </el-select>
          </el-form-item>
          <el-form-item v-if="item.columnType == 'datePicker' && executeEval(row,item.expression,true)"
                        class="query-form-item"
                        :label="item.columnDesc+`:`"
          >
            <el-date-picker
              :picker-options="pickerOptions"
              v-model="actDateRange"
              type="daterange"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>
          <el-form-item v-if="item.columnType == 'date' && executeEval(row,item.expression,true)"
                        class="query-form-item"
                        :label="item.columnDesc+`:`"
          >
            <el-date-picker
              v-model="filterQuery[item.columnName]"
              :style="`width:${item.width+'px'}`"
              value-format="yyyy-MM-dd"
              :disabled="executeEval(null,item.disabledFuc,false)"
              type="date"
              :placeholder="item.columnDesc"
            ></el-date-picker>
          </el-form-item>
        </template>

      </el-form>
      <div class="top-right-btn">
        <el-button-group>
          <!--<el-button icon="el-icon-view" type="primary" @click="hideSearch">显示/隐藏搜索栏</el-button>-->
          <el-button
            type="primary"
            icon="el-icon-refresh"
            @click="onReset"
          >重置
          </el-button>
          <el-button type="primary" icon="el-icon-search" @click="onSubmit"
          >查询
          </el-button
          >
        </el-button-group>
      </div>

      <el-divider style="margin: 15px"></el-divider>

      <!--<div v-if="tableStatus">-->
        <el-table v-loading="loading" :data="list" style="width: 100%;" border highlight-current-row
                  @row-click="(row) => executeFuc(row,'0',tableObj.handleChangeFuc)" ref="multipleTable"
                  :default-sort="defaultSort"
                  :row-style="{ height: '32px' }"
                  @selection-change="handleSelectionChange"
                  @sort-change="handleSortChange"
        >
          <template v-for="(item, index) in tableHeader">
            <el-table-column
              v-if="item.columnType == 'id' && executeEval(row,item.expression,true)"
              type="index" :label="item.columnDesc"
            ></el-table-column>
            <el-table-column
              v-if="item.columnType == 'selection'"
              type="selection"
              :width="item.width"
              :selectable="(row,number) => executeFuc(row,'3',item.clickFuc)"
            ></el-table-column>

            <el-table-column
              v-if="item.columnType == 'radio' && executeEval(row,item.expression,true)"
              :prop="item.columnName"
              :label="item.columnDesc"
              :sortable="item.sort"
              :width="item.width"
              :show-overflow-tooltip="item.tooltip"
              :key="item.columnName"
            >
              <template slot-scope="scope">
                <el-radio :label="scope.row.id" v-model="radioCheck"><span></span></el-radio>
              </template>
            </el-table-column>
            <el-table-column
              v-if="item.columnType == 'laber' && executeEval(row,item.expression,true)"
              :prop="item.columnName"
              :label="item.columnDesc"
              :sortable="item.sort"
              :width="item.width"
              :show-overflow-tooltip="item.tooltip"
              :key="item.columnName"
            >
              <template slot-scope="scope">
            <span :style="{color: executeFuc(scope.row,'4',item.lableRuleObj[scope.row[item.columnName]])}">{{
                item.lableRuleObj[scope.row[item.columnName]]
              }}</span>
              </template>
            </el-table-column>
            <el-table-column
              v-if="item.columnType == 'eltag' && executeEval(row,item.expression,true)"
              :prop="item.columnName"
              :label="item.columnDesc"
              :sortable="item.sort"
              :width="item.width"
              :show-overflow-tooltip="item.tooltip"
              :key="item.columnName"
            >
              <template slot-scope="scope">
                <el-tag
                  :type="executeFuc(scope.row,'4',item,item.lableRuleObj?item.lableRuleObj[scope.row[item.columnName]]:scope.row[item.columnName])"
                >
              <span>{{
                  item.lableRuleObj ? item.lableRuleObj[scope.row[item.columnName]] : scope.row[item.columnName]
                }}</span>
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column
              v-if="item.columnType == 'button' && executeEval(row,item.expression,true)"
              :prop="item.columnName"
              :label="item.columnDesc"
              :width="item.width"
              :key="item.columnName"
              fixed="right"
            >
              <template slot-scope="scope">
                <el-button v-for="(buttonItem, buttonIndex) in item.buttonRulObj"
                           :type="buttonItem.type"
                           :size="buttonItem.size"
                           :style="buttonItem.style"
                           :key="buttonItem"
                           v-if="executeEval(scope.row,buttonItem.hasPermi,true)"
                           :disabled="executeEval(scope.row,buttonItem.disabledFuc,false)"
                           @click.native.stop="executeFuc(scope.row,'1',buttonItem.clickFuc)"
                >{{ buttonItem.name }}
                </el-button>
              </template>
            </el-table-column>
            <el-table-column
              v-if="item.columnType == 'text' && executeEval(row,item.expression,true)"
              :prop="item.columnName"
              :label="item.columnDesc"
              :sortable="item.sort"
              :width="item.width"
              :show-overflow-tooltip="item.tooltip"
              :key="item.columnName"
            >
              <template slot-scope="scope">
            <span :style="{color: executeFuc(scope.row,'4',item,scope.row[item.columnName])}">{{
                scope.row[item.columnName]
              }}</span>
              </template>
            </el-table-column>
          </template>
        </el-table>

        <pagination
          v-show="total>0"
          :total="total"
          :limit.sync="filterQuery.limit"
          :page.sync="filterQuery.page"
          @pagination="handleCurrentChange"
        ></pagination>
      <!--</div>-->
    </el-card>


    <el-dialog
      title="单据详情"
      :visible.sync="orderDetailVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      v-if="orderDetailVisible"
      width="80%"
      append-to-body
    >
      <orderDetailDialog
      :orderData="orderData"
      >

      </orderDetailDialog>
    </el-dialog>

  </div>
</template>

<script>
import { executeFuc, getHead } from '@/utils/customConfig'
import { convertDate } from '@/utils/date'
import {isBlank} from "@/utils/strUtil";
import { deleteByOrder, orderPage } from '@/api/collect/collectOrder'
import { filterWorkOptimize } from '@/api/basic/workPlace/sysWorkplaceManage'
import { ioCollectCodePage} from '@/api/collect/IoCollectCodeSelect'
import orderDetailDialog from "./orderDetailDialog"

export default {
  name: 'IoCollectCodeSelect1',
  components: {orderDetailDialog},
  data() {
    return {
      //界面配置相关
      //患者处方
      tableHeader: [],
      queryList: [],
      tableObj: [],
      fromList: [],
      // convertDateFun: convertDate,
      //界面配置-------------end

      showSearch: true,
      filterQuery: {
        page: 1,
        limit: 10
      },
      defaultSort: { prop: 'createTime', order: 'desc' },
      loading: false,
      list: [],
      total: 0,
      deleteData: {},
      preLoading: false,
      preDetailList: [],
      preTotal: 0,
      preQuery: {
        prescribeCode: null,
        page: 1,
        limit: 10
      },

      preDiLoading: false,
      preDiDetailList: [],
      preDiTotal: 0,
      preDiQuery: {
        prescribeCode: null,
        page: 1,
        limit: 10
      },

      curRow: null,
      panelALive: false,
      multiplePreSelection: [],
      timer: null, // 定时器
      options: {
        findWorkPlace: []
      },
      checkDetailVisible: false,
      tableStatus: false,
      orderDetailVisible: false,
      orderData: {}
    }
  },
  methods: {
    //启动定时器
    // timerAuto() {
    //   //启动定时器
    //   this.timer = setInterval(() => {
    //     //查询订单是否支付成功
    //     this.getList()
    //   }, 10000)
    //
    //   //清楚定时器的方法
    //   // clearInterval(this.timer)
    // },
    //界面配置相关------------
    executeFuc(row, type, clickFuc, value) {
      return executeFuc(this, row, type, clickFuc, value)
    },
    executeEval(row, expression, defaultRet) {
      if (expression) {
        return eval(expression)
      }
      return defaultRet
    },
    handleSortChange(column, prop, order) {
      if (column.order === 'descending') {
        this.query.sort = 'desc'
      } else {
        this.query.sort = 'asc'
      }
      this.query.orderBy = column.prop
      this.getList()
    },
    ///界面配置相关------------end

    hideSearch() {
      this.showSearch = !this.showSearch
    },
    onReset() {
      this.filterQuery = {
        page: 1,
        limit: 10
      }
      this.list = []
      // this.actDateRange = []
      // this.getList()
    },
    closeDialog() {
      this.bindWorkPlaceVisible = false
      this.getList()
    },
    onSubmit() {

      this.filterQuery.page = 1
      this.getList()
    },

    getList() {
      this.list = []
      if (isBlank(this.filterQuery.workPlaceCode) &&
        isBlank(this.filterQuery.billNo)  &&
        isBlank(this.filterQuery.fromType) &&
        isBlank(this.filterQuery.fromCorp) &&
        isBlank(this.filterQuery.code)) {
        return this.$message.error("请输入查询条件")
      }
      this.loading = true
      ioCollectCodePage(this.filterQuery).then(res => {
        this.loading = false
        this.list = res.data.list || []
        this.total = res.data.total || 0

      }).catch(() => {
        this.loading = false
        this.list = []
        this.total = 0
      })
    },
    handleCurrentChange(val) {
      this.filterQuery.page = val.page
      this.getList()
    },

    deleteDialog(_this, row) {
      _this.$confirm('此操作将永久删除该订单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
        })
        .catch(() => {
        })
    },
    handleCheckDetail(_this, row) {
      _this.checkDetailVisible = true
    },
    handleSelectionChange(val) {
      this.multiplePreSelection = val
    },

    findWorkPlace(_this, val) {
      let query = {
        // chargeUser: _this.$store.getters.adminId,
        userIdFlag: true,
        key: val,
        page: 1,
        limit: 10
      }
      filterWorkOptimize(query)
        .then((response) => {
          _this.loading = false
          _this.options.findWorkPlace = response.data || []
          if (_this.options.findWorkPlace.length == 1) {
            _this.filterQuery.workPlaceCode = _this.options.findWorkPlace[0].code
          }
        })
        .catch(() => {
          _this.loading = false
          _this.options.findWorkPlace = []
        })
    },

    getInputFocus(event) {
      event.currentTarget.select()
    },
    enterKey(event) {
      this.getList()
      this.$refs.inputRef.select()
    },


    orderDetail(_this,row){
     _this.orderData = row
      _this.orderDetailVisible = true
    },
    // deleteCode(_this,row){
    //   _this.$confirm('此操作将永久删除该追溯码记录, 是否继续?', '提示', {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消',
    //     type: 'warning'
    //   }).then(() => {
    //     deleteCollectCode(row).then(res => {
    //       if (res.code == 20000){
    //         _this.$message.success("删除成功")
    //         _this.getList()
    //       }else {
    //         return _this.$message.error("删除错误")
    //       }
    //     })
    //   }).catch(() => {
    //
    //   })
    // },
  },
  mounted() {
  },
  created() {
    getHead('IoCollectCodeSelect', '1').then((re) => {
      // 处理返回的数据
      this.tableObj = re.data
      this.tableHeader = re.data.tableList
      this.queryList = re.data.queryList
      this.fromList = re.data.fromList
      // this.getList()
      this.findWorkPlace(this, '')
    })
    // this.timerAuto()
  },
  // destroyed() {
  //   clearInterval(this.timer)
  // }

}
</script>
<style scoped>
.query-form {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.query-form-item {
  margin-right: 5px;
  margin-bottom: 6px;
}
</style>