怎么修改文件BimeterReplace.vue使之具有编辑功能

为了使 `BimeterReplace.vue` 文件中的表格具备可编辑功能，你可以参考已有的模板进行以下改动：

### 1. 修改 `<a-table>` 组件

在 `<a-table>` 组件中添加对各字段的编辑支持：

<a-table
  :size="tableRowHeight"
  :scroll="{ x: true }"
  bordered
  rowKey="id"
  :columns="columns"
  :dataSource="data"
  :pagination="ipagination"
  :loading="loading"
  :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
  class="j-table-force-nowrap"
  @change="handleTableChange"
>
  <!-- 添加对各个字段的编辑支持 -->
  <template
    v-for="col in ['meterNum', 'meterNum1', 'batch', 'productionDate', 'validityYears', 'iccid', 'imei', 'statu', 'depart', 'departDate', 'intakeDirection', 'ware1house', 'gauge', 'minFlow', 'maxFlow', 'maxWorkPressure', 'workVoltage']"
    :slot="col"
    slot-scope="text, record, index"
  >
    <div :key="col">
      <a-input
        v-if="record.editable"
        style="margin: -5px 0"
        :value="text"
        @change="e => handleChange(e.target.value, record.key, col)"
      />
      <template v-else>{{ text }}</template>
    </div>
  </template>

  <template slot="action" slot-scope="text, record">
    <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
      <a>移除</a>
    </a-popconfirm>
    <span v-if="!record.editable">
      <a @click="() => edit(record.id)">编辑</a>
    </span>
    <span v-else>
      <a @click="() => save(record.id)">保存</a>
      <a-popconfirm title="确定取消吗?" @confirm="() => cancel(record.id)">
        <a>取消</a>
      </a-popconfirm>
    </span>
  </template>
</a-table>

### 2. 更新 `<script>` 部分

在 `<script>` 部分中添加必要的方法以支持编辑功能：

<script>
import '@/assets/less/TableExpand.less'
import { mixinDevice } from '@/utils/mixin'
import draggable from 'vuedraggable'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import StockMeterBaseDrawer from '../modules/StockMeterBaseDrawer.vue'
import JSuperQuery from '@/components/jeecg/JSuperQuery.vue'
import { initColumnsMixin } from '@/mixins/publicInitColumnsMixinNew'
import BizBatchImport from '../modules/BizBatchImport.vue'
import Drawer from './Drawer copy.vue'
import StockMeterAddForm from './StockMeterAddForm.vue'

export default {
  name: 'BiMeterReplace',
  mixins: [JeecgListMixin, mixinDevice, initColumnsMixin],
  components: {
    StockMeterBaseDrawer,
    JSuperQuery,
    draggable,
    BizBatchImport,
    Drawer,
    StockMeterAddForm
  },
  data() {
    this.cacheData = this.data.map(item => ({ ...item }));
    return {
      editingKey: '',
      visible: false,
      data: [
        {
          "id": "1",
          "meterNum": "123456789",
          "gmType2": "类型B",
          "vendorCode": "厂商X",
          "meterNum1": "123456789-01",
          "batch": "2024-01-01-B",
          "productionDate": "2024-01-01",
          "validityYears": "5",
          "iccid": "98765432109876543210",
          "imei": "12345678901234567890",
          "statu": "启用",
          "depart": "检测中心A",
          "departDate": "2024-02-01",
          "intakeDirection": "左侧",
          "ware1house": "W100",
          "gauge": "DN25",
          "minFlow": "0.1",
          "maxFlow": "1.5",
          "maxWorkPressure": "1.6",
          "workVoltage": "3.6V"
        }
      ],
      defColumns: [
        { slots: { title: 'meterNumTitle' }, align: 'center', dataIndex: 'meterNum', scopedSlots: { customRender: 'meterNum' } },
        { title: '表具类型', align: 'center', dataIndex: 'gmType2' },
        { title: '厂商', align: 'center', dataIndex: 'vendorCode' },
        { slots: { title: 'meterNum1Title' }, align: 'center', dataIndex: 'meterNum1', scopedSlots: { customRender: 'meterNum1' } },
        { slots: { title: 'batchTitle' }, align: 'center', dataIndex: 'batch', scopedSlots: { customRender: 'batch' } },
        { slots: { title: 'productionDateTitle' }, align: 'center', dataIndex: 'productionDate', scopedSlots: { customRender: 'productionDate' }, customRender: function(text) { return !text ? '' : text.length > 10 ? text.substr(0, 10) : text } },
        { slots: { title: 'validityYearsTitle' }, align: 'center', dataIndex: 'validityYears', scopedSlots: { customRender: 'validityYears' } },
        { slots: { title: 'iccidTitle' }, align: 'center', dataIndex: 'iccid', scopedSlots: { customRender: 'iccid' } },
        { slots: { title: 'imeiTitle' }, align: 'center', dataIndex: 'imei', scopedSlots: { customRender: 'imei' } },
        { slots: { title: 'statuTitle' }, align: 'center', dataIndex: 'statu', scopedSlots: { customRender: 'statu' } },
        { slots: { title: 'departTitle' }, align: 'center', dataIndex: 'depart', scopedSlots: { customRender: 'depart' } },
        { slots: { title: 'departDateTitle' }, align: 'center', dataIndex: 'departDate', scopedSlots: { customRender: 'departDate' }, customRender: function(text) { return !text ? '' : text.length > 10 ? text.substr(0, 10) : text } },
        { title: '进气方向', align: 'center', dataIndex: 'intakeDirection' },
        { title: '规格型号', align: 'center', dataIndex: 'ware1house' },
        { title: '口径', align: 'center', dataIndex: 'gauge' },
        { title: '最小流量（m³/h）', align: 'center', dataIndex: 'minFlow' },
        { title: '最大流量（m³/h）', align: 'center', dataIndex: 'maxFlow' },
        { title: '最大工作压力值', align: 'center', dataIndex: 'maxWorkPressure' },
        { title: '工作电压', align: 'center', dataIndex: 'workVoltage' },
        { title: '操作', dataIndex: 'action', align: 'center', fixed: 'right', width: 147, scopedSlots: { customRender: 'action' } }
      ],
      url: {
        list: '/stock/stockMeterBase/list',
        delete: '/stock/stockMeterBase/delete',
        deleteBatch: '/stock/stockMeterBase/deleteBatch',
        changeStatusBatch: '/stock/stockMeterBase/changeStatusBatch',
        exportXlsxUrl: '/stock/stockMeterBase/exportExcel',
        importXlsxUrl: '/stock/stockMeterBase/importExcel',
        exportXlsxTemplateUrl: '/stock/stockMeterBase/exportExcelTemplate'
      },
      dictOptions: {},
      superFieldList: []
    };
  },
  created() {
    this.getSuperFieldList();
  },
  methods: {
    handleChange(value, key, column) {
      const newData = [...this.data];
      const target = newData.find(item => key === item.key);
      if (target) {
        target[column] = value;
        this.data = newData;
      }
    },
    edit(key) {
      const newData = [...this.data];
      const target = newData.find(item => key === item.key);
      this.editingKey = key;
      if (target) {
        target.editable = true;
        this.data = newData;
      }
    },
    save(key) {
      const newData = [...this.data];
      const newCacheData = [...this.cacheData];
      const target = newData.find(item => key === item.key);
      const targetCache = newCacheData.find(item => key === item.key);
      if (target && targetCache) {
        delete target.editable;
        this.data = newData;
        Object.assign(targetCache, target);
        this.cacheData = newCacheData;
      }
      this.editingKey = '';
    },
    cancel(key) {
      const newData = [...this.data];
      const target = newData.find(item => key === item.key);
      this.editingKey = '';
      if (target) {
        Object.assign(target, this.cacheData.find(item => key === item.key));
        delete target.editable;
        this.data = newData;
      }
    },
    showDrawer() {
      this.visible = true;
    },
    onClose() {
      this.visible = false;
    },
    getSuperFieldList() {
      let fieldList = [];
      fieldList.push({ type: 'string', value: 'companyCode', text: '所属燃气公司编码' });
      fieldList.push({ type: 'string', value: 'meterNum', text: '表具编号' });
      fieldList.push({ type: 'string', value: 'householdNum', text: '户号' });
      fieldList.push({ type: 'string', value: 'batch', text: '批次' });
      fieldList.push({ type: 'int', value: 'warehouse', text: '所属仓库' });
      fieldList.push({ type: 'int', value: 'storageStatus', text: '在库状态' });
      fieldList.push({ type: 'date', value: 'storageDate', text: '入库日期' });
      fieldList.push({ type: 'date', value: 'productionDate', text: '生产日期' });
      fieldList.push({ type: 'int', value: 'validityYears', text: '有效期(年)' });
      fieldList.push({ type: 'string', value: 'iccid', text: '表具ICCID' });
      fieldList.push({ type: 'string', value: 'imei', text: '表具IMEI' });
      fieldList.push({ type: 'string', value: 'intakeDirection', text: '进气方向' });
      fieldList.push({ type: 'int', value: 'gmType', text: '使用场景(表具类型 1民用 2商用)' });
      fieldList.push({ type: 'int', value: 'isAuto', text: '是否远传 0：否 ；1：是' });
      fieldList.push({ type: 'string', value: 'licenceCode', text: '表具对应的协议编号' });
      fieldList.push({ type: 'string', value: 'productModelCode', text: '表具产品品类code' });
      fieldList.push({ type: 'string', value: 'vendorCode', text: '厂商' });
      fieldList.push({ type: 'int', value: 'verifyStatus', text: '检定状态' });
      fieldList.push({ type: 'int', value: 'maintenanceStatus', text: '保养状态' });
      fieldList.push({ type: 'int', value: 'lifeStatus', text: '表具状态(生命周期)' });
      fieldList.push({ type: 'int', value: 'status', text: '表具状态 0停用 1启用' });
      fieldList.push({ type: 'date', value: 'verifyDate', text: '检定日期' });
      fieldList.push({ type: 'int', value: 'verifyAgency', text: '检定机构' });
      fieldList.push({ type: 'int', value: 'flowSpecification', text: '流量规格（字典）' });
      fieldList.push({ type: 'int', value: 'measPrinciple', text: '测量原理' });
      fieldList.push({ type: 'int', value: 'gauge', text: '口径' });
      fieldList.push({ type: 'string', value: 'minFlow', text: '最小流量（m³/h）' });
      fieldList.push({ type: 'string', value: 'maxFlow', text: '最大流量（m³/h）' });
      fieldList.push({ type: 'string', value: 'maxWorkPressure', text: '最大工作压力值' });
      fieldList.push({ type: 'string', value: 'workVoltage', text: '工作电压' });
      fieldList.push({ type: 'string', value: 'remarks', text: '备注' });
      fieldList.push({ type: 'int', value: 'maintenanceDays', text: '距离下次保养天数(定时任务计算)' });
      fieldList.push({ type: 'string', value: 'householder', text: '户主名' });
      fieldList.push({ type: 'int', value: 'userType', text: '用户类型：1-居民用户；2-商业用户；3-工业用户；4-公共服务用户 5：公福-学校和敬老院 6:其他' });
      fieldList.push({ type: 'string', value: 'createBy', text: '创建人' });
      fieldList.push({ type: 'date', value: 'createTime', text: '创建时间' });
      fieldList.push({ type: 'string', value: 'updateBy', text: '更新人' });
      fieldList.push({ type: 'date', value: 'updateTime', text: '更新日期' });
      this.superFieldList = fieldList;
    },
  },
};
</script>

### 3. 样式调整

如果有需要，可以适当调整样式部分，确保输入框和文本在视觉上一致且不冲突。

<style scoped>
.editable-row-operations a {
  margin-right: 8px;
}
</style>

通过以上步骤，你的 `BimeterReplace.vue` 文件将具备单元格编辑功能。