vue table表格页面新增、查看

zyy_wx

已于 2024-05-28 14:16:52 修改

阅读量174

点赞数 3

文章标签： vue.js javascript 前端

于 2024-05-28 13:56:32 首次发布

本文链接：https://blog.csdn.net/zyy_wx/article/details/139264743

版权

输入框：divEdit.vue
查看框：devView.vue
css文件：index.css
新增页面：add.vue
查看页面：view.vue

divEdit.vue页面：

<template>
  <div :contenteditable="canEdit" v-html="innerText" @keydown="textareaKeydown($event)" @blur="changeText"></div>
</template>
<script>
export default {
  name: 'divEdit',
  props: ['value'],
  data() {
    return {
      innerText: this.value,
      canEdit: ''
    }
  },
  methods: {
    changeText() {
      this.innerText = this.$el.innerHTML
      this.$emit('input', this.innerText)
    },
    onEnter(event) {
      console.log(event)
      event.preventDefault()
      return false
    },
    textareaKeydown(event) {
      if (event.keyCode === 13) {
        event.preventDefault() // 阻止浏览器默认换行操作
        return false
      }
    }
  }
}
</script>

devView.vue页面：

<template>
  <div>{{value}}</div>
</template>
<script>
export default {
  name:'divView',
  props: ['value'],
  data(){
    return {innerText:this.value}
  },
  methods:{
  }
}
</script>

index.css文件：

.acceptance-header {
  font-size: 20px;
  margin-bottom: 12px;
}

.acceptance-body {
  border: 1px solid #b7b7be;
}

.br {
  border-right: 1px solid #b7b7be;
}

.bm {
  border-bottom: 1px solid #b7b7be;
}

.flex {
  display: flex;
}

.glow {
  flex-shrink: 0;
  flex-grow: 1;
  width: 0;
}

.glows {
  display: inline-block;
  min-width: 36px !important;
  text-align: center;
}

.shrink {
  flex-shrink: 0;
  flex-grow: 0;
}

.cell {
  padding: 10px;
}

.center {
  display: flex;
  align-items: center;
  justify-content: center;
}


.h100 {
  height: 100px;
}

.v-center {
  display: flex;
  align-items: center;
}

.h-center {
  display: flex;
  justify-content: center;
}

.w20 {
  width: 20px;
}

.w40 {
  width: 40px;
}

.w80 {
  width: 80px;
}

.w100 {
  width: 100px;
}

.w120 {
  width: 120px;
}

.w160 {
  width: 160px;
}

.w200 {
  width: 200px;
}

.w220 {
  width: 220px;
}

.w320 {
  width: 320px;
}

.w420 {
  width: 420px;
}

.space-around {
  justify-content: space-around;
}

.border-none {
  border: none
}

.dialog-btns {
  text-align: center;
  margin-top: 20px;
}

add.vue页面：

<template>
  <div class="acceptance-edit ">
    <el-dialog :visible="drawerEnable" title="" @closed="drawerClosed" @close="drawerClose" center
               width="1100px" :close-on-click-modal="false" top="20px" :modal-append-to-body="false"
               custom-class="acceptance-pop">
      <div class="pop-body">
        <div class="pop-page">
          <div class="acceptance-header center">预制墙板类构件质量检验记录</div>
          <div class="iscroll">
            <div class="acceptance-body">
              <div class="flex bm">
                <div class="w200 br cell center">工程名称</div>
                <div class="glow br cell center">
                  <divEdit class="glow v-center cell" v-model="insert.projectName"></divEdit>
                </div>
                <div class="w160 br cell center">构件编号</div>
                <div class="w160 v-center  center">
                  <divEdit class="glow v-center cell" v-model="insert.componentNumber"></divEdit>
                </div>
              </div>
              <div class="flex bm">
                <div class="w100 br cell center">主控项目</div>
                <div class="glow">
                  <div class="flex bm">
                    <div class="w100 br cell center">7.2.2</div>
                    <div class="glow br cell v-center">
                      预制构件的脱模强度
                    </div>
                    <div class="w320 cell center">
                      <el-radio-group v-model="insert.demoldingStrength" size="mini">
                        <el-radio label="Y" border>符合</el-radio>
                        <el-radio label="N" border>不符合</el-radio>
                      </el-radio-group>
                    </div>
                  </div>
                  <div class="flex bm">
                    <div class="w100 br cell center">7.2.3-7.2.6</div>
                    <div class="glow br cell v-center">
                      预应力构件
                    </div>
                    <div class="w320 cell center">
                      <el-radio-group v-model="insert.prestressedComponents" size="mini">
                        <el-radio label="Y" border>符合</el-radio>
                        <el-radio label="N" border>不符合</el-radio>
                      </el-radio-group>
                    </div>
                  </div>
                  <div class="flex bm">
                    <div class="w100 br cell center">7.2.7-7.2.9</div>
                    <div class="glow br cell v-center">
                      预埋预留、粗糙面、键槽
                    </div>
                    <div class="w320 cell center">
                      <el-radio-group v-model="insert.reserved" size="mini">
                        <el-radio label="Y" border>符合</el-radio>
                        <el-radio label="N" border>不符合</el-radio>
                      </el-radio-group>
                    </div>
                  </div>
                  <div class="flex bm">
                    <div class="w100 br cell center">7.2.10</div>
                    <div class="glow br cell v-center">
                      面砖粘结强度
                    </div>
                    <div class="w320 cell center">
                      <el-radio-group v-model="insert.brickStrength" size="mini">
                        <el-radio label="Y" border>符合</el-radio>
                        <el-radio label="N" border>不符合</el-radio>
                      </el-radio-group>
                    </div>
                  </div>
                  <div class="flex bm">
                    <div class="w100 br cell center">7.2.11-7.2.12</div>
                    <div class="glow br cell v-center">
                      夹心保温外墙板保温性能、拉结件性能
                    </div>
                    <div class="w320 cell center">
                      <el-radio-group v-model="insert.heatPreservation" size="mini">
                        <el-radio label="Y" border>符合</el-radio>
                        <el-radio label="N" border>不符合</el-radio>
                      </el-radio-group>
                    </div>
                  </div>
                  <div class="flex">
                    <div class="w100 br cell center">7.2.13</div>
                    <div class="glow br cell v-center">
                      预制构件的严重缺陷
                    </div>
                    <div class="w320 cell center">
                      <el-radio-group v-model="insert.seriousDisadvantage" size="mini">
                        <el-radio label="Y" border>符合</el-radio>
                        <el-radio label="N" border>不符合</el-radio>
                      </el-radio-group>
                    </div>
                  </div>
                </div>
              </div>
              <div class="flex">
                <div class="w200 br cell center">生产单位检验结果</div>
                <div class="glow">
                  <div class="flex bm">
                    <div class="glow br cell v-center">不合格品复查返修记录</div>
                    <div class="w420 cell v-center">
                      <divEdit class="glow v-center cell" v-model="insert.recordNotConformingProducts"></divEdit>
                    </div>
                  </div>
                  <div class="cell">
                    <div class="v-center">
                      检验结果
                      <divEdit class="glow v-center cell" v-model="insert.inspectionResults"></divEdit>
                    </div>
                    <div style="text-align: right">
                      <divEdit class="glows cell" v-model="insert.signYear"></divEdit>
                      年
                      <divEdit class="glows cell" v-model="insert.signMonth"></divEdit>
                      月
                      <divEdit class="glows cell" v-model="insert.signDay"></divEdit>
                      日
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="dialog-btns">
        <el-button type="primary" v-if="isState" @click="insertTap">新增保存</el-button>
        <el-button type="primary" v-else @click="editTap">编辑保存</el-button>
        <el-button @click="drawerEnable = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import divEdit from './components/divEdit.vue'
import {addRecords, updateRecords} from "@/api/production/componentRecords/ComponentQualityInspectionRecords";

export default {
  name: 'table1',
  props: {
    famsg: {
      type: Object,
      default: function () {
        return {}
      }
    },
    faType: {
      type: String,
    }
  },
  data() {
    return {
      drawerEnable: true,
      insert:{},
      submit: false,
      // 新增/编辑 状态
      isState: true,
    }
  },
  mounted() {
    if (this.faType === '修改') {
      this.isState = false
      this.insert = {...this.insert, ...this.famsg}
    } else {
      this.isState = true
    }
    this.drawerEnable = true
  },
  components: {
    divEdit
  },
  methods: {
    
  }
}
</script>

<style lang="scss" scoped>
@import './css/index.css';

</style>

view.vue页面：

<template>
  <div class="acceptance-edit ">
    <el-dialog :visible="drawerEnable" title="" @closed="drawerClosed" @close="drawerClose" center
               width="1100px" :close-on-click-modal="false" top="20px" :modal-append-to-body="false"
               custom-class="acceptance-pop">
      <div class="pop-body">
        <div class="pop-page">
          <div class="acceptance-header center">预制墙板类构件质量检验记录</div>
          <div class="iscroll">
            <div class="acceptance-body">
              <div class="flex bm">
                <div class="w200 br cell center">工程名称</div>
                <div class="glow br cell center">
                  <divView class="glow v-center cell" v-model="insert.projectName"></divView>
                </div>
                <div class="w160 br cell center">构件编号</div>
                <div class="w160 v-center  center">
                  <divView class="glow v-center cell" v-model="insert.componentNumber"></divView>
                </div>
              </div>
              <div class="flex bm">
                <div class="w100 br cell center">主控项目</div>
                <div class="glow">
                  <div class="flex bm">
                    <div class="w100 br cell center">7.2.2</div>
                    <div class="glow br cell v-center">
                      预制构件的脱模强度
                    </div>
                    <div class="w320 cell center">
                      {{ insert.demoldingStrength | viewTxt }}
                    </div>
                  </div>
                  <div class="flex bm">
                    <div class="w100 br cell center">7.2.3-7.2.6</div>
                    <div class="glow br cell v-center">
                      预应力构件
                    </div>
                    <div class="w320 cell center">
                      {{ insert.prestressedComponents | viewTxt }}
                    </div>
                  </div>
                  <div class="flex bm">
                    <div class="w100 br cell center">7.2.7-7.2.9</div>
                    <div class="glow br cell v-center">
                      预埋预留、粗糙面、键槽
                    </div>
                    <div class="w320 cell center">
                      {{ insert.reserved | viewTxt }}
                    </div>
                  </div>
                  <div class="flex bm">
                    <div class="w100 br cell center">7.2.10</div>
                    <div class="glow br cell v-center">
                      面砖粘结强度
                    </div>
                    <div class="w320 cell center">
                      {{ insert.brickStrength | viewTxt }}
                    </div>
                  </div>
                  <div class="flex bm">
                    <div class="w100 br cell center">7.2.11-7.2.12</div>
                    <div class="glow br cell v-center">
                      夹心保温外墙板保温性能、拉结件性能
                    </div>
                    <div class="w320 cell center">
                      {{ insert.heatPreservation | viewTxt }}
                    </div>
                  </div>
                  <div class="flex">
                    <div class="w100 br cell center">7.2.13</div>
                    <div class="glow br cell v-center">
                      预制构件的严重缺陷
                    </div>
                    <div class="w320 cell center">
                      {{ insert.seriousDisadvantage | viewTxt }}
                    </div>
                  </div>
                </div>
              </div>
              <div class="flex">
                <div class="w200 br cell center">生产单位检验结果</div>
                <div class="glow">
                  <div class="flex bm">
                    <div class="glow br cell v-center">不合格品复查返修记录</div>
                    <div class="w420 cell v-center">
                      <divView class="glow v-center cell" v-model="insert.recordNotConformingProducts"></divView>
                    </div>
                  </div>
                  <div class="cell">
                    <div class="v-center">
                      检验结果
                      <divView class="glow v-center cell" v-model="insert.inspectionResults"></divView>
                    </div>
                    <div style="text-align: right">
                      <divView class="glows cell" v-model="insert.signYear"></divView>
                      年
                      <divView class="glows cell" v-model="insert.signMonth"></divView>
                      月
                      <divView class="glows cell" v-model="insert.signDay"></divView>
                      日
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="dialog-btns">
        <el-button @click="drawerEnable = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import divView from './components/divView.vue'

export default {
  name: 'table1',
  props: {
    famsg: {
      type: Object,
      default: function () {
        return {}
      }
    },
    faType: {
      type: String,
    }
  },
  filters: {
    viewTxt(value) {
      if (!value) return '--'
      return value == 'Y' ? '符合' : '不符合'
    }
  },
  data() {
    return {
      drawerEnable: true,
      insert: {},
      submit: false,
    }
  },
  mounted() {
    this.insert = {...this.insert, ...this.famsg}
    this.drawerEnable = true
  },
  components: {
    divView
  },
  methods: {
    drawerClosed() {
      this.$emit('popClosed', this.submit)
    },
    drawerClose() {
      this.drawerEnable = false
    }
  }
}
</script>

<style lang="scss" scoped>
@import './css/index.css';
</style>