province-uniapp-qinghai-ipad/pages/storageAcceptanceInspect/aqTable.vue

<template>
  <div>
    <div class="act_header">
    <div>{{ title }}</div>
    <div v-if="!readonly" class="row">
      <u-button text="添加" @tap="add"></u-button>
    </div>
    </div>
	<table class="static-table">
		<tr>
			<td>序号</td>
			<td>检验项目</td>
			<td>检验结果</td>
			<td>单项结论</td>
			<td>检验方法</td>
			<td v-if="! readonly">操作</td>
		</tr>
		<tr v-for="(item, index) in acTableData" :key="item.key">
			<td>{{index + 1}}</td>
			<td>
				<simple-select v-model="item.inspectionItemId" :data="enumId" load-type="dict" :readonly="readonly"></simple-select>
			</td>
			<td>
				<u--input v-model="item.inspectionValue" :readonly="readonly"></u--input>
			</td>
			<td>
				<simple-select v-model="item.singleConclusion" data="OPT4" load-type="static" :readonly="readonly"></simple-select>
			</td>
			<td>
				<u--input v-model="item.inspectionMethod" :readonly="readonly"></u--input>
			</td>
			<td v-if="! readonly">
				<u-button text="删除" type="error" @tap="del(item)"></u-button>
			</td>
		</tr>
	</table>
  </div>
</template>

<script>


import simpleSelect from "@/components/simpleSelect.vue";
import { genKey, clone, deleteListField } from "@/utils/tools";

export default {
  components: {simpleSelect},
  props: {
    title: {
      type: String,
      required: false,
      default: "",
    },
    dataList: {
      type: Array,
      required: false,
      default: () => {return []}
    },
    readonly: {
      type: Boolean,
      required: false,
      default: false,
    },
    enumId: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      listLoading: false,
      acTableData: this.dataList,
    };
  },
  mounted() {
    this.acTableData = this.dataList
  },
  watch: {
    dataList(n) {
      this.acTableData = this.dataList
    }
  },
  methods: {
    add() {
      // inspectionItemId	integer($int32)
      // inspectionMethod	string
      // inspectionValue	string
      // qcQualityInspectionId	integer($int32)
      // singleConclusion	string
      const d = {
        inspectionItemId: null, // 检测项目 ids
        inspectionMethod: null, // 检验方法
        inspectionValue: null, // 值
        singleConclusion: null, // 符合/不符合
        key: genKey('aqct')
      }

      this.acTableData.push(d)
    },
    del(data) {
      this.acTableData = this.acTableData.filter(d => d.key !== data.key)
    },
    getTableData() {
      const list = clone(this.acTableData)
	  deleteListField(list, 'key')
      return list
    },
    clear() {
      this.acTableData = []
    }
  },
};
</script>

<style scoped lang="scss">
.act_header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.row {
  margin-bottom: 5px;
}
</style>