mts / MTS-UI · Files

<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <div class="content">
        <div style="width: 100%;text-align: center;font-weight: 600;">每日电梯安全检查记录</div>
        <table>
          <tr>
            <th>序号:</th>
            <th style="width: 19%;">检查因素:</th>
            <th style="width: 19%;">检查项目:</th>
            <th>检查内容:</th>
            <th>检查结果</th>
          </tr>
          <tr v-for="(item, index) in people" :key="index">
            <td class="font">{{ index + 1 }}</td>
            <td class="font">{{ item.checkFactors }}</td>
            <td class="font">{{ item.inspectionItems }}</td>
            <td class="font">{{ item.inspectionContent }}</td>

            <td :class="'text-center'">
              <select v-model="item.ischeck">
                <option value="0">✓</option>
                <option value="1" selected>✕</option>
              </select>
            </td>
          </tr>

          <tr>
            <td colspan="5">
              检查情况记录：
              <button @click="ww()">清空</button>
              <br/>
              <textarea style="width: 98%;" name="" id="" cols="30" rows="10" v-model="record"> </textarea>
            </td>
          </tr>
          <tr>
            <td colspan="3">检查人员:
              <a-input v-model="recorder"></a-input>
            </td>
            <td colspan="3">检查日期：
              <j-date v-model="recordDate"></j-date>
            </td>
          </tr>
          <tr style="height: 5px;">
            <td colspan="5" style="text-align: center;">
              <button style="width: 20rem;height: 3rem;" @click="submit">提交</button>
            </td>
          </tr>
        </table>
      </div>
    </j-form-container>
  </a-spin>
</template>

<script>

import {getAction, httpAction} from '@/api/manage'
import pick from 'lodash.pick'

export default {
  name: 'SecurityCheckRecordForm',
  components: {},
  props: {
    //流程表单data
    formData: {
      type: Object,
      default: () => {
      },
      required: false
    },
    //表单模式：true流程表单 false普通表单
    formBpm: {
      type: Boolean,
      default: false,
      required: false
    },
    //表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false
    }
  },
  data() {
    return {
      form: this.$form.createForm(this),
      model: {},
      people: [
        {
          checkFactors: '人的因素',
          inspectionItems: '工具保管',
          inspectionContent: '妥善保管电梯专用钥匙和工具',
          ischeck: 1,
        },
        {
          checkFactors: '设备因素',
          inspectionItems: '运行情况',
          inspectionContent: '电梯运行无异常噪声和振动',
          ischeck: 1,
        },
        {
          checkFactors: '设备因素',
          inspectionItems: '轿厢通风及照明',
          inspectionContent: '轿厢正常照明和通风有效',
          ischeck: 1,
        },
        {
          checkFactors: '设备因素',
          inspectionItems: '门防夹装置',
          inspectionContent: '防止门夹人的保护装置功能',
          ischeck: 1,
        },
        {
          checkFactors: '设备因素',
          inspectionItems: '层门和轿门',
          inspectionContent: '电梯层门和轿门应有效锁紧和闭合，无明显变形',
          ischeck: 1,
        },
        {
          checkFactors: '设备因素',
          inspectionItems: '楼层显示及按钮',
          inspectionContent: '楼层显示及按钮功能与指示',
          ischeck: 1,
        },
        {
          checkFactors: '设备因素',
          inspectionItems: '通道',
          inspectionContent: '保持电梯应急救援通道畅通，自动扶梯与自动人行道出入口畅通',
          ischeck: 1,
        },
        {
          checkFactors: '设备因素',
          inspectionItems: '梳齿板或踏面齿',
          inspectionContent: '自动扶梯与自动人行道梳齿板梳齿或者踏面齿应当完好，不得缺损',
          ischeck: 1,
        },
        {
          checkFactors: '设备因素',
          inspectionItems: '使用须知',
          inspectionContent: '自动扶梯与自动人行道使用须知',
          ischeck: 1,
        },
        {
          checkFactors: '设备因素',
          inspectionItems: '标志、标识',
          inspectionContent: `1) 机房门外侧有下述或者类似的警示标志："电梯机器——危险 </br>
                                        2) 轿厢内的铭牌和"特种设备使用标志"标识;</br>
                                        3) 设有IC卡系统的电梯轿厢内的出口层选层按钮标志;<br>
                                        4) 超面积载货电梯、杂物电梯层站处的额定载重量标志;<br>
                                        5) 自动扶梯与自动人行道"急停"指示标记;<br>
                                        6) 消防员电梯象形图标志;<br>
                                        7) 其他安全标志`,
          ischeck: 1,
        },
        {
          checkFactors: '环境因素',
          inspectionItems: '自然环境',
          inspectionContent: '防火、防爆、防雷、防风、防雨、防冻、防腐等设施齐全、完好',
          ischeck: 1,
        },
      ],
      labelCol: {
        xs: {span: 24},
        sm: {span: 5},
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 16},
      },
      confirmLoading: false,
      validatorRules: {},
      url: {
        add: "/check/securityCheckRecord/add",
        edit: "/check/securityCheckRecord/edit",
        queryById: "/check/securityCheckRecord/queryById"
      }
    }
  },
  computed: {
    formDisabled() {
      if (this.formBpm === true) {
        if (this.formData.disabled === false) {
          return false
        }
        return true
      }
      return this.disabled
    },
    showFlowSubmitButton() {
      if (this.formBpm === true) {
        if (this.formData.disabled === false) {
          return true
        }
      }
      return false
    }
  },
  created() {
    //如果是流程中表单，则需要加载流程表单data
    this.showFlowData();
  },
  methods: {
    add() {
      this.edit({});
    },
    edit(record) {
      this.form.resetFields();
      this.model = Object.assign({}, record);
      this.visible = true;
      this.$nextTick(() => {
        this.form.setFieldsValue(pick(this.model, 'cloum1', 'cloum2', 'cloum3', 'cloum4', 'cloum5', 'cloum6', 'cloum7', 'cloum8', 'cloum9', 'cloum10', 'cloum11', 'cloum12', 'cloum13', 'cloum14', 'cloum15', 'cloum16', 'cloum17', 'cloum18', 'cloum19', 'cloum20', 'record', 'recorder', 'recordDate', 'type'))
      })
    },
    //渲染流程表单数据
    showFlowData() {
      if (this.formBpm === true) {
        let params = {id: this.formData.dataId};
        getAction(this.url.queryById, params).then((res) => {
          if (res.success) {
            this.edit(res.result);
          }
        });
      }
    },
    submitForm() {
      const that = this;
      // 触发表单验证
      this.form.validateFields((err, values) => {
        if (!err) {
          that.confirmLoading = true;
          let httpurl = '';
          let method = '';
          if (!this.model.id) {
            httpurl += this.url.add;
            method = 'post';
          } else {
            httpurl += this.url.edit;
            method = 'put';
          }
          let formData = Object.assign(this.model, values);
          console.log("表单提交数据", formData)
          httpAction(httpurl, formData, method).then((res) => {
            if (res.success) {
              that.$message.success(res.message);
              that.$emit('ok');
            } else {
              that.$message.warning(res.message);
            }
          }).finally(() => {
            that.confirmLoading = false;
          })
        }

      })
    },
    popupCallback(row) {
      this.form.setFieldsValue(pick(row, 'cloum1', 'cloum2', 'cloum3', 'cloum4', 'cloum5', 'cloum6', 'cloum7', 'cloum8', 'cloum9', 'cloum10', 'cloum11', 'cloum12', 'cloum13', 'cloum14', 'cloum15', 'cloum16', 'cloum17', 'cloum18', 'cloum19', 'cloum20', 'record', 'recorder', 'recordDate', 'type'))
    },
  }
}
</script>


<style scoped>
.app-body {
  width: 100%;
  height: 100%;
}

.content {
  width: 99.1%;
  height: 100%;
  border: 1px solid yellowgreen;
  margin: 0 auto;
  overflow: auto;
}

body {
  font-size: 1rem;
}

table,
td,
th {
  border-collapse: collapse;
  border-spacing: 0;
}

table {
  width: 100%;
  margin-top: 10px;
}

td,
th {
  border: 2px solid #000000;
  padding: 5px 10px;
}

th {
  background: #42b983;
  font-size: 3vw;
  font-weight: 400;
  color: #fff;
  cursor: pointer;
}

.font {
  font-size: 2.8vw;
}

tr:nth-of-type(odd) {
  background: #fff;
}

tr:nth-of-type(even) {
  background: #eee;
}

button {
  outline: none;
  padding: 5px 8px;
  color: #fff;
  border: 1px solid #bcbcbc;
  border-radius: 3px;
  background-color: #009a61;
  cursor: pointer;
}

button:hover {
  opacity: 0.8;
}

.text-center {
  text-align: center;
}
</style>

<style lang="less">
.app_container {
  width: 100%;
  height: 100%;
  background: #ffff !important;
}
</style>