动态显示列表列

<template>
  <j-modal
    :title="title"
    :visible="visible"
    :width="mWidth"
    @ok="handleOk"
    @cancel="handleCancel"
    placement="right"
  >
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :xl="5" :lg="5" :md="8" :sm="18">
            <a-form-item label="对象名">
              <a-input placeholder="请输入对象名" v-model="queryParam.targetName"></a-input>
            </a-form-item>
          </a-col>
          <a-col :xl="5" :lg="5" :md="8" :sm="18">
            <a-form-item label="工号">
              <a-input placeholder="请输入工号" v-model="queryParam.targetCode"></a-input>
            </a-form-item>
          </a-col>
          <a-col :xl="5" :lg="5" :md="8" :sm="18">
            <a-form-item label="点名状态">
              <a-select v-model="queryParam.rollCallStatus" placeholder="请选择点名状态"  @change='rollCallStatusChange'>
                <a-select-option :value="0">正常</a-select-option>
                <a-select-option :value="1">异常</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>

          <a-col :xl="4" :lg="7" :md="8" :sm="12">
                  <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                    <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                     <a-button @click="searchReset" icon="reload"
                               style="margin-left: 8px;margin-right: 8px">重置</a-button>
                   <a-button type="primary" ghost icon="download" @click="exportInOutWellHistoryXls('点名明细记录报表')"
                        style="margin-left: 8px;margin-right: 8px">导出</a-button>
                  </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- table区域-begin -->
    <div style="margin-bottom: 20px;">
      <hr id="hr1">
    </div>
    <a-table
      ref="table"
      size="middle"
      bordered
      rowKey="id"
      :scroll="{x:true}"
      :columns="columns"
      :dataSource="dataSource"
      :pagination="ipagination"
      :loading="loading"
      @change="handleTableChange">
       <span slot="action" slot-scope="text, record">
          <a :disabled="record.rollCallStatus!=1" @click="editRollCall(record)">
            <a-icon type="edit"/>
            处理
          </a>
       </span>
      <template slot="remarkText" slot-scope="text,record">
        <a-tooltip v-if="text&&text.length > 9" :title="text">
          {{ `${text.slice(0, 9)}...` }}
        </a-tooltip>
        <span v-else>{{text}}</span>
      </template>
    </a-table>
    <!-- table区域-end -->
    <TextInputModal :visible="isModalVisible"
                    :maxLength="100"
                    title="处理意见"
                    placeholder="请输入点名处理意见"
                    @onOk="textHandleOk"
                    @onCancel="textHandleCancel" />
  </j-modal>
</template>

<script>
import {JeecgListMixin} from '@/mixins/JeecgListMixin'
import {getAction, putAction} from '@api/manage'
import TextInputModal from "@views/modules/sidebar/roll/TextInputModal.vue";
import JSelectDepart from "@comp/jeecgbiz/JSelectDepart.vue";

export default {
    name: "RollCallReportItemList",
    mixins: [JeecgListMixin],
    components: {
      JSelectDepart,
      TextInputModal,
    },
    props: {
     // tagId: PropTypes.string.def(""),
    },
    data() {
      return {
        title: "点名明细",
        visible: false,
        isModalVisible: false,
        mWidth: 1500,
        digital: {
          rollCallWhy: null,
          clearSecond: null,
          record: null
        },
        dynamicColumns :[
          {
            title: '地图',
            align: "center",
            dataIndex: 'mapName'
          },
          {
            title: '区域',
            align: "center",
            dataIndex: 'regionName'
          },
          {
            title: '部门',
            align: "center",
            dataIndex: 'departmentName',
          },
          {
            title: '组',
            align: "center",
            dataIndex: 'groupName'
          },
          {
            title: '工种',
            align: "center",
            dataIndex: 'jobName'
          },
        ],

        //列定义
        columns: [
          {
            title: '#',
            dataIndex: '',
            key: 'rowIndex',
            width: 60,
            align: "center",
            customRender: function (t, r, index) {
              return parseInt(index) + 1;
            }
          },
          {
            title: '名称',
            align: "center",
            dataIndex: 'targetName',
          },
          {
            title: '工号',
            align: "center",
            dataIndex: 'targetCode',
          },
          {
            title: '卡号',
            align: "center",
            dataIndex: 'tagId',
          },
          {
            title: '点名时间',
            align: "center",
            dataIndex: 'rollCallTime',
            scopedSlots: {customRender: "rollCallTime"}
          },
          {
            title: '点名状态',
            align: "center",
            dataIndex: 'rollCallStatus',
            customRender: (text, record) => {
              // 根据 rollCallType 的值返回不同的字符串
              return text === 0 ? '正常' : text === 1 ? '异常' : '未知';
            }
          },
          {
            title: '处理意见',
            align: "center",
            dataIndex: 'remark',
            scopedSlots: {customRender: "remarkText"}
          },
          {
            title: '操作',
            dataIndex: 'action',
            align: "center",
            fixed: "right",
            width: 70,
            scopedSlots: {customRender: 'action'}
          }
        ],
        url: {
          list: "/report/rollcall/itemList",
          exportXlsUrl: "/report/rollcall/itemExportXls",
          updateTextUrl: "/report/rollcall/itemEdit",
        },
      }
    },
    computed: {

    },
    watch: {
      visible(val) {
        if (val) {
          this.getColumn(this.queryParam.rollCallWhy-1)
          this.loadData();
        }
      }
    },
    created() {
    },
    methods: {
      getColumn(index){
        if(JSON.stringify(this.dynamicColumns).includes(JSON.stringify(this.columns[4])) === false){
          this.columns.splice(4, 0, this.dynamicColumns[index])
        }else{
          this.columns.splice(4, 1, this.dynamicColumns[index])
        }
      },
      rollCallStatusChange(e){
        this.queryParam.rollCallStatus = e;
      },
      editRollCall(record){
       const {rollCallWhy}=this.queryParam;
        this.digital.rollCallWhy=rollCallWhy;
        this.digital.record = record;
        this.isModalVisible = true;
      },
      textHandleOk(value) {
        console.log('用户提交的内容:', value);
        this.submitUpdateText(this.digital.rollCallWhy,this.digital.record, value);
        this.digital.record = null;
        this.isModalVisible = false;
      },
      //编辑处理意见
      submitUpdateText(rollCallWhy,record,value){
        putAction(this.url.updateTextUrl, {
          id: record.id,
          rollCallWhy: rollCallWhy,
          rollCallTime: record.rollCallTime,
          remark:value
        }).then((result) => {
          if (result.success) {
            this.$message.success("操作成功！");
            this.loadData();
          }
        });
      },
      textHandleCancel() {
        this.isModalVisible = false;
      },
      handleOk() {
        this.handleCancel();
      },
      handleCancel() {
        this.queryParam={};
        this.ipagination.current =1;
        this.visible = false;
      },
      searchReset(){
        this.queryParam.targetName=null;
        this.queryParam.targetCode=null;
        this.queryParam.rollCallStatus=null;
        this.ipagination.current =1;
        this.loadData();
      },
      loadData() {
        this.loading = true;
        let params = Object.assign(this.queryParam);
        params.pageNo = this.ipagination.current;
        params.pageSize = this.ipagination.pageSize;
        getAction(this.url.list, this.queryParam).then((res) => {
          if (res.success) {
            this.dataSource = res.result.records;
            this.ipagination.total = res.result.total;
          }
          if (res.code === 510) {
            this.$message.warning(res.message)
          }
          this.loading = false;
        })
      },
      exportInOutWellHistoryXls(fileName) {
        this.handleExportXls(fileName);
      },
    }
  }
</script>

<style scoped>

</style>