后端批量操作分页

于 2024-06-20 17:10:59 发布
阅读量538 收藏 4
点赞数 3
文章标签： 前端 javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45765215/article/details/139838095
版权 
<template>
  <div class="d-tag-list-wrapper padding-top_10">
    <div class="radio-button-list-wrapper">
      <template v-for="table in DTagList585248.tableList">
        <span
          class="radio-btn"
          :class="DTagList585248.checked === table.id ? 'active-btn' : ''"
          @click="DTagList585248.checked = table.id"
        >
          {{ table.buttonLabel }}
        </span>
      </template>
    </div>
    <div class="table-list-wrapper">
      <el-button
        size="default"
        class="custom-button custom-button-margin"
        @clikc="DTagList585248_AddRow"
      >
        添加
      </el-button>
      <el-table
        border
        :data="DTagList585248_currentTagTableData()"
        header-row-class-name="headerClass"
        :header-cell-style="headerCellStyle"
        :row-style="stripeRow"
        :cell-style="{ padding: '3px' }"
      >
        <el-table-column
          v-for="(item, index) in DTagList585248.tableList[-1].tableHead"
          :key="index"
          :prop="item.columnName"
          :label="item.title"
          :width="
            countColWidth(item, index, DTagList585248.tableList[-1].tableHead)
          "
        >
        </el-table-column>
        <el-table-column
          label="操作"
          width="60"
          v-if="
            DTagList585248.tableList[-1].tableHead &&
            DTagList585248.tableList[-1].tableHead.length
          "
          align="center"
          class-name="custom-column"
        >
          <template slot-scope="scope">
            <el-button
              class="custom-button"
              :type="!scope.row.key ? '' : 'danger'"
              :disabled="!scope.row.key"
              size="default"
              @click="DTagList585248_DeleteRow(scope.row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
        <template slot="empty">
          <el-empty description="空空如也"></el-empty>
        </template>
      </el-table>
      <el-pagination
        :page-sizes="DTagList585248.tableList[-1].pageSizes"
        class="custom-pagination"
        layout="total, sizes,prev, pager, next,jumper"
        :page-size="DTagList585248.tableList[-1].pagination.pageSize"
        :current-page="DTagList585248.tableList[-1].pagination.currentPage"
        :total="DTagList585248.tableList[-1].pagination.total"
        @size-change="DTagList585248_SizeChange"
        @current-change="DTagList585248_CurrentChange"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import global from "@/assets/js/global"
import {
  defineComponent,
  toRefs,
  onMounted,
  reactive,
  getCurrentInstance
} from 'vue';
import {
  useRouter,
  useRoute
} from "vue-router";
import axios from "axios";
import {
  ElMessage
} from "element-plus";
export default defineComponent({
  components: {},
  props: {},
  setup() {
    const instance = getCurrentInstance()
    const router = useRouter();
    const route = useRoute();
    const ctxData = reactive({

      dForm: {
        serverIp: 'localhost',
        serverPort: '8080',
        interfaceName: 'interface',
        tableName: null,
        tableID: null,
        formName: null,
        formId: null,
      },
      DTagList585248: {
        "buttonAlign": "left",
        "tableHeight": 495,
        "checked": "132485",
        "tableList": [{
          "id": "132485",
          "buttonLabel": "表格1",
          "closeable": true,
          "methodName": "",
          "documentName": "",
          "exportObjectFlag": false,
          "tableId": 7,
          "tableName": "WMS_AutoRcvDocLine",
          "tableHead": null,
          "tableData": null,
          "axiosGetTableHeadUrl": "",
          "axiosGetTableDataUrl": "",
          "pagination": {
            "currentPage": 85,
            "pageSize": 10,
            "total": 0
          },
          "newRows": [{
            "key": "402807",
            "ID": null,
            "AutoRcvDoc": null,
            "AutoShelfIn": null,
            "AutoShelfInDocNo": null,
            "DeliveryDocNo": null,
            "DeliveryDate": null,
            "SupplierCode": null,
            "SupplierName": null,
            "StoreType": null,
            "Status": null,
            "Item": null,
            "ItemCode": null,
            "ItemName": null,
            "UOM": null,
            "UOMName": null,
            "iQty": null,
            "DisableDate": null,
            "cMemo": null,
            "CreateBy": null,
            "CreateTime": null,
            "ChangeBy": null,
            "ChangeTime": null
          }, {
            "key": "807841",
            "ID": null,
            "AutoRcvDoc": null,
            "AutoShelfIn": null,
            "AutoShelfInDocNo": null,
            "DeliveryDocNo": null,
            "DeliveryDate": null,
            "SupplierCode": null,
            "SupplierName": null,
            "StoreType": null,
            "Status": null,
            "Item": null,
            "ItemCode": null,
            "ItemName": null,
            "UOM": null,
            "UOMName": null,
            "iQty": null,
            "DisableDate": null,
            "cMemo": null,
            "CreateBy": null,
            "CreateTime": null,
            "ChangeBy": null,
            "ChangeTime": null
          }, {
            "key": "151688",
            "ID": null,
            "AutoRcvDoc": null,
            "AutoShelfIn": null,
            "AutoShelfInDocNo": null,
            "DeliveryDocNo": null,
            "DeliveryDate": null,
            "SupplierCode": null,
            "SupplierName": null,
            "StoreType": null,
            "Status": null,
            "Item": null,
            "ItemCode": null,
            "ItemName": null,
            "UOM": null,
            "UOMName": null,
            "iQty": null,
            "DisableDate": null,
            "cMemo": null,
            "CreateBy": null,
            "CreateTime": null,
            "ChangeBy": null,
            "ChangeTime": null
          }, {
            "key": "543892",
            "ID": null,
            "AutoRcvDoc": null,
            "AutoShelfIn": null,
            "AutoShelfInDocNo": null,
            "DeliveryDocNo": null,
            "DeliveryDate": null,
            "SupplierCode": null,
            "SupplierName": null,
            "StoreType": null,
            "Status": null,
            "Item": null,
            "ItemCode": null,
            "ItemName": null,
            "UOM": null,
            "UOMName": null,
            "iQty": null,
            "DisableDate": null,
            "cMemo": null,
            "CreateBy": null,
            "CreateTime": null,
            "ChangeBy": null,
            "ChangeTime": null
          }, {
            "key": "309463",
            "ID": null,
            "AutoRcvDoc": null,
            "AutoShelfIn": null,
            "AutoShelfInDocNo": null,
            "DeliveryDocNo": null,
            "DeliveryDate": null,
            "SupplierCode": null,
            "SupplierName": null,
            "StoreType": null,
            "Status": null,
            "Item": null,
            "ItemCode": null,
            "ItemName": null,
            "UOM": null,
            "UOMName": null,
            "iQty": null,
            "DisableDate": null,
            "cMemo": null,
            "CreateBy": null,
            "CreateTime": null,
            "ChangeBy": null,
            "ChangeTime": null
          }, {
            "key": "249125",
            "ID": null,
            "AutoRcvDoc": null,
            "AutoShelfIn": null,
            "AutoShelfInDocNo": null,
            "DeliveryDocNo": null,
            "DeliveryDate": null,
            "SupplierCode": null,
            "SupplierName": null,
            "StoreType": null,
            "Status": null,
            "Item": null,
            "ItemCode": null,
            "ItemName": null,
            "UOM": null,
            "UOMName": null,
            "iQty": null,
            "DisableDate": null,
            "cMemo": null,
            "CreateBy": null,
            "CreateTime": null,
            "ChangeBy": null,
            "ChangeTime": null
          }],
          "pageSizes": [10, 20, 30]
        }]
      },
      dRules: {

      },



    })
    const ctxFunction = reactive({
      DTagList585248_InitTagListData() {
        DTagList585248.tagList.forEach(tag => {
          if (tag.id === ctxData.DTagList585248.checked) {
            DTagList585248_GetTableHead(tag.id)
            DTagList585248_GetTableData(tag.id)
          } else {
            proxy.$nextTick(() => { //避免首次加载时，同时请求多个列表的数据
              DTagList585248_GetTableHead(tag.id)
              DTagList585248_GetTableData(tag.id)
            })
          }
        })
      },
      DTagList585248_GetTableHead(checked = null) {
        let target = ctxData.DTagList585248.tableList.find(dt => dt.id === checked || ctxData.DTagList585248.checked)
        if (!!target && target.tableId && target.axiosGetTableHeadUrl) {
          //let url = ctxData.dForm.serverIp+':'+ctxData.dForm.serverPort+target.axiosGetTableHeadUrl
          let url = target.axiosGetTableHeadUrl
          axios({
            url: url,
            method: 'get',
            params: {
              tableID: target.tableId
            }
          }).then(res => {
            //todo 结合实际的响应来赋值。将 res.data.tableHead 换成你自己的相应层级数据
            //target.tableHead=res.data.tableHead
            //todo 测试用
            target.tableHead = res.data.data.data
          })
        }
      },
      DTagList585248_GetTableData(checked = null) {
        let target = ctxData.DTagList585248.tableList.find(tb => tb.id === checked || ctxData.DTagList585248.checked)
        if (!!target && target.tableName && target.axiosGetTableDataUrl) {
          //let url = ctxData.dForm.serverIp+':'+ctxData.dForm.serverPort+target.axiosGetTableDataUrl
          let url = target.axiosGetTableDataUrl
          axios({
            url: url,
            method: 'get',
            params: {
              tableName: target.tableName,
              pageSize: target.pagination.pageSize,
              currentPage: target.pagination.currentPage
            }
          }).then(res => {
            //todo 结合实际的响应来赋值。将 res.data.tableData 换成你自己的相应层级数据
            //target.tableData=res.data.tableData
            //todo 测试用
            target.tableData = res.data.data.page.list
            target.pagination.total = res.data.data.page.total
          })
        }
      },
      DTagList585248_sizeChange(pageSize) {
        ctxData.DTagList585248.tableList.find(tb => tb.id === ctxData.DTagList585248.checked).pagination.pageSize = pageSize
        ctxData.DTagList585248_GetTableData()
      },
      DTagList585248_currentChange(currentPage) {
        ctxData.DTagList585248.tableList.find(tb => tb.id === ctxData.DTagList585248.checked).pagination.currentPage = currentPage
        ctxData.DTagList585248_GetTableData()
      },
      DTagList585248_AddRow() {
        let targetTable = ctxData.DTagList585248.tableList.find(item => item.id === ctxData.DTagList585248.checked)
        if (!targetTable.newRows) {
          targetTable['newRows'] = []
        }
        let newRow = {
          key: generateId()
        }
        targetTable.tableHead.forEach(item => {
          //newRow[item.FieldName]=null
          newRow[item.columnName] = null
        })
        targetTable.newRows.push(newRow)

        let newRowsLength = targetTable.newRows.length
        let total = targetTable.pagination.total + 1
        let pageSize = targetTable.pagination.pageSize

        let lastPageSize = total - Math.floor(total / pageSize) * pageSize
        targetTable.pagination.currentPage = Math.ceil(total / pageSize)
        targetTable.pagination.total = total

        if (lastPageSize !== 0 && lastPageSize <= newRowsLength) { //超出 页数，再加一页
          let arr = []
          for (let i = newRowsLength - lastPageSize; i < newRowsLength; i++) {
            arr.push(targetTable.newRows[i])
          }
          targetTable.tableData = arr
        } else if (!!targetTable.tableID) {
          axios({
            url: targetTable.axiosGetTableDataUrl,
            method: 'get',
            params: {
              tableName: targetTable.tableName,
              pageSize: targetTable.pagination.pageSize,
              currentPage: targetTable.pagination.currentPage
            }
          }).then(res => {
            targetTable.tableData = [...res.data.data.page.list, ...targetTable.newRows]
          })
        }
      },
      DTagList585248_DeleteRow(row) {
        let targetTable = ctxData.DTagList585248.tableList.find(item => item.id === ctxData.DTagList585248.checked)
        if (row.ID) {

        } else if (row.key) {
          for (let i = 0; i < targetTable.newRows.length; i++) {
            if (row.key === targetTable.newRows[i].key) {
              if (targetTable.tableData.length === 1) {
                targetTable.pagination.currentPage--
              }
              targetTable.newRows.splice(i, 1)
              targetTable.pagination.total--
              ctxData.DTagList585248_CurrentChange(targetTable.pagination.currentPage)
              break
            }
          }
        }
      },
      DTagList585248_currentTagTableData() {
        let target = ctxData.DTagList585248.tableList.find(tb => tb.id === ctxData.DTagList585248.checked)
        return target.tableData
      },
      onFormCreated733562() {

      },
      onFormMounted799444() {

      },
      onFormDataChange525583() {

      },
      headerCellStyle(data) {
        return global.headerCellStyle(data)
      },
      stripeRow(data) {
        return global.stripeRow(data)
      },
      countColWidth(item, index, tableHead) {
        return global.countColWidth(item, index, tableHead)
      },
      const globalFunctionArr = {

      }
    })
    ctxFunction.onFormCreated733562()
    onMounted(() => {
      ctxFunction.onFormMounted799444();
      ctxFunction.DTagList585248_InitTagListData()
    })
    return {
      ...toRef(ctxData),
      ...toRef(ctxFunction),
    }
  }
})
</script>

<template>
  <el-form
    :model="dialogFormData"
    :rules="dialogFormRules"
    ref="dialogFormRef"
    :validate-on-rule-change="false"
    style="text-align: center"
  >
    <el-table
      :data="dialogFormData.tableData"
      height="460"
      border
      stripe
      style="width: 100%"
      @selection-change="handleSelectionChange"
      :row-class-name="tableRowClassName"
      @current-change="handleRowChange"
      @cell-click="handleCellClick"
      :row-key="(row) => row.id"
      v-bind="dialogForm.option"
      class="base"
      ref="tableRef"
    >
      <el-table-column
        type="selection"
        :reserve-selection="true"
        width="55"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        type="index"
        label="序号"
        width="55"
        align="center"
        :show-overflow-tooltip="true"
      >
        <template #default="scope">
          <span>{{
            (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1
          }}</span>
        </template>
      </el-table-column>

      <template v-for="(rowItem, index) in dialogForm.rule" :key="index">
        <template v-if="rowItem.type === 'row'">
          <template v-for="(colItem, idx) in rowItem.children" :key="idx">
            <template v-if="colItem.type === 'col'">
              <template v-for="(item, idx2) in colItem.children" :key="idx2">
                <el-table-column
                  :label="item.label"
                  :prop="item.prop"
                  align="center"
                  :show-overflow-tooltip="true"
                  v-bind="item.props"
                  v-if="item.show !== false"
                >
                  <template #default="scope" v-if="item.type">
                    <el-form-item
                      :prop="`tableData.${scope.$index}.${item.prop}`"
                      :rules="dialogFormRules[`${item.prop}`]"
                    >
                      <template v-if="item.prop && item.type === 'input'">
                        <el-tooltip
                          :content="scope.row[`${item.prop}`]"
                          placement="top"
                          :disabled="isShowTooltip"
                        >
                          <el-input
                            @mouseover.native="inputOnMouseOver($event)"
                            v-model="scope.row[`${item.prop}`]"
                            v-bind="item.props"
                            @click="$emit('child-event', item.event)"
                            :readonly="readonlyList[`${item.prop}`] !== 2"
                            :class="
                              disabledList[`${item.prop}`] === 2
                                ? 'inputRight'
                                : 'inputWrong'
                            "
                          />
                        </el-tooltip>
                      </template>

                      <template v-if="item.prop && item.type === 'inputNumber'">
                        <el-input-number
                          v-model="scope.row[`${item.prop}`]"
                          v-bind="item.props"
                          :readonly="readonlyList[`${item.prop}`] !== 2"
                          :disabled="disabledList[`${item.prop}`] !== 2"
                        />
                      </template>

                      <template v-if="item.prop && item.type === 'colorPicker'">
                        <el-color-picker
                          v-model="scope.row[`${item.prop}`]"
                          v-bind="item.props"
                          :readonly="readonlyList[`${item.prop}`] !== 2"
                          :disabled="disabledList[`${item.prop}`] !== 2"
                        />
                      </template>

                      <template v-if="item.prop && item.type === 'radio'">
                        <el-radio-group
                          v-model="scope.row[`${item.prop}`]"
                          v-bind="item.props"
                          :readonly="readonlyList[`${item.prop}`] !== 2"
                          :disabled="disabledList[`${item.prop}`] !== 2"
                        >
                          <el-radio
                            v-for="option in item.options"
                            :key="option.value"
                            :value="option.value"
                            :label="option.label"
                          >
                            {{ option.label }}
                          </el-radio>
                        </el-radio-group>
                      </template>

                      <template v-if="item.prop && item.type === 'checkbox'">
                        <template
                          v-if="item.options && item.options.length > 1"
                        >
                          <el-checkbox-group
                            v-model="formModel[`${item.prop}`]"
                            v-bind="item.props"
                            :readonly="readonlyList[`${item.prop}`] !== 2"
                            :disabled="disabledList[`${item.prop}`] !== 2"
                          >
                            <el-checkbox
                              v-for="option in item.options"
                              :key="option.value"
                              v-bind="option"
                            >
                              {{ option.label }}
                            </el-checkbox>
                          </el-checkbox-group>
                        </template>
                        <template v-else>
                          <el-checkbox
                            v-model="scope.row[`${item.prop}`]"
                            v-bind="item.props"
                            :readonly="readonlyList[`${item.prop}`] !== 2"
                            :disabled="disabledList[`${item.prop}`] !== 2"
                          />
                        </template>
                      </template>

                      <template v-if="item.prop && item.type === 'select'">
                        <el-select
                          v-model="scope.row[`${item.prop}`]"
                          v-bind="item.props"
                          :readonly="readonlyList[`${item.prop}`] !== 2"
                          :disabled="disabledList[`${item.prop}`] !== 2"
                          :class="
                            disabledList[`${item.prop}`] === 2
                              ? 'inputRight'
                              : 'inputWrong'
                          "
                          @click="$emit('btn-event', scope)"
                        >
                          <el-option
                            v-for="option in item.options"
                            :key="option.value"
                            :label="option.label"
                            :value="option.value"
                          >
                          </el-option>
                        </el-select>
                      </template>

                      <template v-if="item.prop && item.type === 'switch'">
                        <el-switch
                          v-model="scope.row[`${item.prop}`]"
                          v-bind="item.props"
                          :readonly="readonlyList[`${item.prop}`] !== 2"
                          :disabled="disabledList[`${item.prop}`] !== 2"
                        />
                      </template>

                      <template v-if="item.prop && item.type === 'cascader'">
                        <el-cascader
                          v-model="scope.row[`${item.prop}`]"
                          :options="item.options"
                          v-bind="item.props"
                          :readonly="readonlyList[`${item.prop}`] !== 2"
                          :disabled="disabledList[`${item.prop}`] !== 2"
                        />
                      </template>

                      <template v-if="item.prop && item.type === 'datePicker'">
                        <el-date-picker
                          v-model="scope.row[`${item.prop}`]"
                          v-bind="item.props"
                          :readonly="readonlyList[`${item.prop}`] !== 2"
                          :class="
                            disabledList[`${item.prop}`] === 2
                              ? 'inputRight'
                              : 'inputWrong'
                          "
                        />
                      </template>

                      <template v-if="item.prop && item.type === 'timePicker'">
                        <el-time-picker
                          v-model="scope.row[`${item.prop}`]"
                          v-bind="item.props"
                          :readonly="readonlyList[`${item.prop}`] !== 2"
                          :class="
                            disabledList[`${item.prop}`] === 2
                              ? 'inputRight'
                              : 'inputWrong'
                          "
                        />
                      </template>

                      <template v-if="item.prop && item.type === 'upload'">
                        <el-upload
                          v-model="scope.row[`${item.prop}`]"
                          v-bind="item.props"
                          ref="upload"
                        >
                          <template #trigger>
                            <el-button type="primary" size="small">{{
                              item.data
                            }}</el-button>
                          </template>
                        </el-upload>
                      </template>

                      <template v-if="item.prop && item.type === 'image'">
                        <el-image v-bind="item.props" />
                      </template>

                      <template v-if="item.prop && item.type === 'rate'">
                        <el-rate
                          v-model="scope.row[`${item.prop}`]"
                          v-bind="item.props"
                        />
                      </template>

                      <template v-if="item.prop && item.type === 'slider'">
                        <el-slider
                          v-model="scope.row[`${item.prop}`]"
                          v-bind="item.props"
                        />
                      </template>

                      <template v-if="item.prop && item.type === 'tree'">
                        <el-tree
                          v-model="scope.row[`${item.prop}`]"
                          v-bind="item.props"
                        />
                      </template>

                      <template v-if="item.prop && item.type === 'transfer'">
                        <el-transfer
                          v-model="scope.row[`${item.prop}`]"
                          v-bind="item.props"
                        />
                      </template>

                      <template v-if="item.prop && item.type === 'timeline'">
                        <el-timeline
                          v-model="scope.row[`${item.prop}`]"
                          v-bind="item.props"
                        >
                          <el-timeline-item
                            v-for="(option, index) in item.options"
                            :key="index"
                            v-bind="option"
                          >
                            {{ option.content }}
                          </el-timeline-item>
                        </el-timeline>
                      </template>

                      <template v-if="item.type === 'alert'">
                        <el-alert v-bind="item.props" />
                      </template>

                      <template v-if="item.type === 'button'">
                        <el-button v-bind="item.props">
                          {{ item.props.data }}
                        </el-button>
                      </template>

                      <template v-if="item.type === 'text'">
                        <el-text v-bind="item.props">
                          {{ item.props.data }}
                        </el-text>
                      </template>

                      <template v-if="item.type === 'divider'">
                        <el-divider v-bind="item.props">
                          {{ item.props.data }}
                        </el-divider>
                      </template>

                      <template v-if="item.type === 'link'">
                        <el-link v-bind="item.props">
                          {{ item.props.data }}
                        </el-link>
                      </template>

                      <template v-if="item.type === 'tag'">
                        <el-tag v-bind="item.props">
                          {{ item.props.data }}
                        </el-tag>
                      </template>

                      <template v-if="item.type === 'row'">
                        <el-row v-bind="item.props" :gutter="20">
                          <template
                            v-for="(colItem, idx3) in item.children"
                            :key="idx3"
                          >
                            <el-col
                              v-if="colItem.type === 'col'"
                              :span="
                                colItem.props.span ? colItem.props.span : 6
                              "
                              :xs="colItem.props.xs ? colItem.props.xs : 24"
                              :sm="colItem.props.sm ? colItem.props.sm : 6"
                              v-bind="colItem.props"
                            >
                              <template
                                v-if="colItem.children[0].type === 'button'"
                              >
                                <el-button
                                  v-bind="colItem.children[0].props"
                                  @click="$emit('btn-event', scope)"
                                >
                                  {{ colItem.children[0].props.data }}
                                </el-button>
                              </template>

                              <template
                                v-if="colItem.children[0].type === 'tag'"
                              >
                                <el-tag
                                  v-bind="colItem.children[0].props"
                                  @click="$emit('btn-event', scope)"
                                >
                                  {{ colItem.children[0].props.data }}
                                </el-tag>
                              </template>

                              <template
                                v-if="colItem.children[0].type === 'link'"
                              >
                                <el-link
                                  v-bind="colItem.children[0].props"
                                  @click="$emit('btn-event', scope)"
                                >
                                  {{ colItem.children[0].props.data }}
                                </el-link>
                              </template>
                            </el-col>
                          </template>
                        </el-row>
                      </template>
                    </el-form-item>
                  </template>
                </el-table-column>
              </template>
            </template>
          </template>
        </template>
      </template>
    </el-table>
  </el-form>

  <div style="margin: 8px 0px 0px 4px">
    <el-pagination
      :current-page="queryParams.pageNum"
      :page-size="queryParams.pageSize"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      layout="total, sizes, prev, pager, next, jumper"
      :page-sizes="[5, 10, 20, 30, 50]"
      prev-text="上一页"
      next-text="下一页"
      background
    />
  </div>
</template>

<script setup>
import { ref, computed, getCurrentInstance, nextTick } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import request from "@/js/api/base/request";

const { proxy } = getCurrentInstance();
let props = defineProps({
  lineList: Array,
  dialogForm: Object,
  dialogFormRules: Object,
  disabledList: {
    type: Object,
    default: {},
  },
  readonlyList: {
    type: Object,
    default: {},
  },
  queryParams: {
    type: Object,
    default: {
      total: 0,
      pageNum: 1,
      pageSize: 10,
      requestData: [],
    },
  },
});
let emit = defineEmits(["child-event", "btn-event", "pagination"]);

// 表格数据
const requestData = ref(props.queryParams.requestData); //后端请求来的数据(有id)
const addRowsData = ref([]); //新增的数据
const editRowsData = ref([]); //修改的数据(有id)
const delRowsData = ref([]); //删除的数据(有id)
const tableData = computed(() => {
  requestData.value.forEach((requestItem) => {
    // 查找是否数据是已删除的
    let delItem = delRowsData.value.find((delItem) => {
      delItem.id === requestItem.id;
    });
    if (delItem !== undefined) {
      requestItem.alterFlag = "Del";
    }
    // 查找是否数据是已修改的
    let editItem = editRowsData.value.find((editItem) => {
      editItem.id === requestItem.id;
    });
    if (editItem !== undefined) {
      requestItem = editItem;
    }
  });
});

// 实现分页
let total = computed(
  () =>
    props.queryParams.total +
    addRowsData.value.length -
    delRowsData.value.length
);
const handleCurrentChange = (newPage) => {
  props.queryParams.pageNum = newPage;
};
const handleSizeChange = (newSize) => {
  props.queryParams.pageSize = newSize;
};
/**多选框选中数据 */
const multipleSelection = ref([]);
const handleSelectionChange = (selection) => {
  multipleSelection.value = selection;
};

/**获取表格当行的序号 */
const tableRowClassName = ({ row, rowIndex }) => {
  row.row_index =
    (props.queryParams.pageNum - 1) * props.queryParams.pageSize + rowIndex + 1;
};

/**动态修改表格当前行 */
const handleRowChange = (row) => {
  if (row && row.id && row.alterFlag === undefined) {
    row.alterFlag = "Edit";
  }
  console.log("动态修改表格当前行row:", row);
};

/**点击单元格聚焦输入框*/
let currentRow = ref(null);
let currentColumn = ref(null);

function handleCellClick(row, column, cell, event) {
  currentRow.value = row;
  currentColumn.value = column.property;
}

function handleInputBlur() {
  currentRow.value = null;
  currentColumn.value = null;
}

/**单行增行操作 */
const handleRowAdd = () => {
  addRowsData.value.push({
    alterFlag: "Add",
  });
  turnToEnd();
};

/**单行删行操作(可多选) */
const handleRowDel = () => {
  if (multipleSelection.value.length > 0) {
    ElMessageBox.confirm("此操作将删除所选行数据,您确定要删除吗?", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        ElMessage.warning("记得点击保存或提交");
        multipleSelection.value.map((item) => {
          item.alterFlag = "Del";
          return item;
        });
        props.lineList.filter((item) => item.alterFlag !== "Del");
        console.log("单行删行后的数组:", props.lineList);

        // 清除之前的选中状态
        multipleSelection.value = [];
        proxy.$refs["tableRef"].clearSelection();
      })
      .catch(() => {
        ElMessage.info("已取消删除");
      });
  }
};
/**跳转到最后一页*/
const turnToEnd = () => {
  //总记录数除以每页记录数得到页码
  props.queryParams.pageNum = Math.ceil(total / props.queryParams.pageSize);
  //(后端总记录数减去要删除的记录数除以每页记录数得到页码)
  let pageNum = Math.ceil(
    (props.queryParams.total - delRowsData.value.length) /
      props.queryParams.pageSize
  );

  //如果这最后一页的页码大于数据库的页码,则不用请求后端,
  if (props.queryParams.pageNum > pageNum) {
    dialogFormData.value.tableData = props.lineList
      .filter((item) => item.alterFlag !== "Del")
      .slice(
        (props.queryParams.pageNum - 1) * props.queryParams.pageSize,
        props.queryParams.pageNum * props.queryParams.pageSize
      );
  } else {
  }
  emit("pagination");
};
/**输入框的内容超出长度后，鼠标悬浮在输入框上，出现tooltip提示*/
let isShowTooltip = ref(false);
const inputOnMouseOver = (e) => {
  const target = e.target;
  // 判断是否开启tooltip功能
  if (target.offsetWidth < target.scrollWidth) {
    isShowTooltip.value = false;
  } else {
    isShowTooltip.value = true;
  }
};

const dialogFormRef = ref(null);
const dialogFormData = ref({
  tableData: [],
});
props.lineList = computed(() => {
  [...new Set(addRowsData.value.concat(delRowsData.value))];
});
defineExpose({
  turnToEnd,
  handleRowAdd,
  handleRowDel,
  dialogFormRef,
});
</script>
ProfessorYang_mc
关注
  • 3
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值