hitch-sb-antd/src/views/test/BaseFormBak.vue

<template>
  <a-card :bordered="false" v-show="visible" class="card" :title="modalTitle">
    <h1 style="margin:20px auto; text-align: center"> 质量数据录入界面 </h1>
    <title-divider title="样品" width="90px"></title-divider>
    <a-form :form="form">
      <a-form-item v-show="false" >
        <a-input v-decorator="['id']" type="hidden"/>
      </a-form-item>
      <a-row :gutter="24">
        <a-col :lg="12" :md="24" :sm="24">
          <a-form-item
            label="样品信息"
            :labelCol="BaseTool.Constant.labelCol"
            :wrapperCol="BaseTool.Constant.wrapperCol"
          >
            <a-input
              v-decorator="['param1', {rules: [{required: false, message: '样品信息不能为空'}]}]" />
          </a-form-item>
        </a-col>
        <a-col :lg="12" :md="24" :sm="24">
          <a-form-item
            label="订单号"
            :labelCol="BaseTool.Constant.labelCol"
            :wrapperCol="BaseTool.Constant.wrapperCol"
          >
            <a-input
              v-decorator="['param2']" />
          </a-form-item>
        </a-col>
        <a-col :lg="12" :md="24" :sm="24">
          <a-form-item
            label="检测车间"
            :labelCol="BaseTool.Constant.labelCol"
            :wrapperCol="BaseTool.Constant.wrapperCol"
          >
            <a-select v-decorator="['param3']" placeholder="请选择">
              <a-select-option value="一号车间">
                一号车间
              </a-select-option>
              <a-select-option value="二号车间">
                二号车间
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :lg="12" :md="24" :sm="24">
          <a-form-item
            label="送样时间"
            :labelCol="BaseTool.Constant.labelCol"
            :wrapperCol="BaseTool.Constant.wrapperCol"
          >
            <a-date-picker
              style="width: 100%"
              :format="BaseTool.Date.PICKER_NORM_DATETIME_PATTERN"
              v-decorator="['param4']" />
          </a-form-item>
        </a-col>
        <a-col :lg="12" :md="24" :sm="24">
          <a-form-item
            label="工段名称"
            :labelCol="BaseTool.Constant.labelCol"
            :wrapperCol="BaseTool.Constant.wrapperCol"
          >
            <a-input
              v-decorator="['param5']"
              suffix="%" />
          </a-form-item>
        </a-col>
        <a-col :lg="12" :md="24" :sm="24">
          <a-form-item
            label="水分/ppm"
            :labelCol="BaseTool.Constant.labelCol"
            :wrapperCol="BaseTool.Constant.wrapperCol"
          >
            <a-input
              v-decorator="['param6']"
              suffix="%" />
          </a-form-item>
        </a-col>
        <a-col :lg="12" :md="24" :sm="24">
          <a-form-item
            label="固含量"
            :labelCol="BaseTool.Constant.labelCol"
            :wrapperCol="BaseTool.Constant.wrapperCol"
          >
            <a-input
              style="width:70%"
              v-decorator="['param7', {rules: [{required: false, message: '不能为空'}]}]" />
            <a-button type="primary" style="width:30%" @click="showModel">选择公式</a-button>
          </a-form-item>
        </a-col>
        <a-col :lg="12" :md="24" :sm="24">
          <a-form-item
            label="pH"
            :labelCol="BaseTool.Constant.labelCol"
            :wrapperCol="BaseTool.Constant.wrapperCol"
          >
            <a-input
              style="width:70%"
              v-decorator="['param8', {rules: [{required: false, message: '不能为空'}]}]" />
            <a-button type="primary" style="width:30%" @click="showModel">选择公式</a-button>
          </a-form-item>
        </a-col>
        <a-col :lg="12" :md="24" :sm="24">
          <a-form-item
            label="密度"
            :labelCol="BaseTool.Constant.labelCol"
            :wrapperCol="BaseTool.Constant.wrapperCol"
          >
            <a-input
              suffix="g/cm"
              v-decorator="['param9', {rules: [{required: false, message: '不能为空'}]}]" />
          </a-form-item>
        </a-col>
        <a-col :lg="12" :md="24" :sm="24">
          <a-form-item
            label="HF"
            :labelCol="BaseTool.Constant.labelCol"
            :wrapperCol="BaseTool.Constant.wrapperCol"
          >
            <a-input
              suffix="ug/g"
              v-decorator="['param10', {rules: [{required: false, message: '不能为空'}]}]" />
          </a-form-item>
        </a-col>
        <a-col :lg="12" :md="24" :sm="24">
          <a-form-item
            label="色度"
            :labelCol="BaseTool.Constant.labelCol"
            :wrapperCol="BaseTool.Constant.wrapperCol"
          >
            <a-input
              v-decorator="['param11', {rules: [{required: false, message: '不能为空'}]}]" />
          </a-form-item>
        </a-col>
        <a-col :lg="12" :md="24" :sm="24">
          <a-form-item
            label="LIFSI"
            :labelCol="BaseTool.Constant.labelCol"
            :wrapperCol="BaseTool.Constant.wrapperCol"
          >
            <a-input
              v-decorator="['param12', {rules: [{required: false, message: '不能为空'}]}]" />
          </a-form-item>
        </a-col>
        <a-col :lg="12" :md="24" :sm="24">
          <a-form-item
            label="F-160C"
            :labelCol="BaseTool.Constant.labelCol"
            :wrapperCol="BaseTool.Constant.wrapperCol"
          >
            <a-input
              v-decorator="['param13', {rules: [{required: false, message: '不能为空'}]}]" />
          </a-form-item>
        </a-col>
        <a-col :lg="12" :md="24" :sm="24">
          <a-form-item
            label="GS-907"
            :labelCol="BaseTool.Constant.labelCol"
            :wrapperCol="BaseTool.Constant.wrapperCol"
          >
            <a-input
              v-decorator="['param14', {rules: [{required: false, message: '不能为空'}]}]" />
          </a-form-item>
        </a-col>
        <a-col :lg="12" :md="24" :sm="24">
          <a-form-item
            label="GS-908"
            :labelCol="BaseTool.Constant.labelCol"
            :wrapperCol="BaseTool.Constant.wrapperCol"
          >
            <a-input
              v-decorator="['param15', {rules: [{required: false, message: '不能为空'}]}]" />
          </a-form-item>
        </a-col>
        <a-col :lg="12" :md="24" :sm="24">
          <a-form-item
            label="GS-905"
            :labelCol="BaseTool.Constant.labelCol"
            :wrapperCol="BaseTool.Constant.wrapperCol"
          >
            <a-input
              v-decorator="['param16', {rules: [{required: false, message: '不能为空'}]}]" />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <title-divider title="检测记录" width="90px"></title-divider>
    <div class="table-operator">
    </div>
    <a-table
      bordered
      :data-source="data"
      :columns="columns"
      tableLayout="auto"
      :scroll="{x: 1, y: BaseTool.Constant.scrollY }"
      rowKey="id"
      :row-selection="rowSelection">
      <span slot="action" slot-scope="record">
        <template>
          <a @click="handleEdit(record)">修改</a>
          <a-divider type="vertical" />
          <a-popconfirm title="是否要删除该条数据？" @confirm="handleDelOne(record.id)">
            <a>删除</a>
          </a-popconfirm>
        </template>
      </span>
    </a-table>
    <a-row :gutter="48">
      <a-col :md="48" :sm="48">
        <span class="table-page-search-submitButtons" style="float: right;margin-top: 10px">
          <a-button type="primary" @click="save()">提交</a-button>
          <a-button style="margin-left: 8px" @click="handleCancel()">返回</a-button>
        </span>
      </a-col>
    </a-row>
  </a-card>
</template>

<script>
import pick from 'lodash.pick'

export default {
  name: 'BaseInStoreForm',
  components: {
  },
  data () {
    return {
      confirmLoading: false,
      modalTitle: null,
      form: this.$form.createForm(this),
      visible: true,
      maskClosable: false,
      storeId: null,
      typeMap: {},
      userList: {},
      rowSelection: {
        onChange: (selectedRowKeys, selectedRows) => {
          this.selectedRowKeys = selectedRowKeys
          this.selectedRows = selectedRows
        }
      },
      // 表头
      columns: [
        {
          title: '序号',
          width: 180,
          dataIndex: 'id'
        },
        {
          title: '样品信息',
          width: 120,
          dataIndex: 'param1'
        },
        {
          title: '订单号',
          width: 120,
          dataIndex: 'param2'
        },
        {
          title: '检测车间',
          width: 120,
          dataIndex: 'param3'
        },
        {
          title: '送样时间',
          width: 120,
          dataIndex: 'param4'
        },
        {
          title: '工段名称',
          dataIndex: 'param5',
          width: 120,
          scopedSlots: { customRender: 'num' }
        },
        {
          title: '水分/ppm',
          dataIndex: 'param6',
          width: 150,
          scopedSlots: { customRender: 'price' }
        },
        {
          title: '固含量',
          dataIndex: 'param7',
          width: 150,
          scopedSlots: { customRender: 'totalPrice' }
        },
        {
          title: 'pH',
          dataIndex: 'param8',
          width: 150,
          scopedSlots: { customRender: 'totalPrice' }
        },
        {
          title: '密度',
          dataIndex: 'param9',
          width: 150,
          scopedSlots: { customRender: 'totalPrice' }
        },
        {
          title: 'HF',
          dataIndex: 'param10',
          width: 150,
          scopedSlots: { customRender: 'totalPrice' }
        },
        {
          title: '色度',
          dataIndex: 'param11',
          width: 150,
          scopedSlots: { customRender: 'totalPrice' }
        },
        {
          title: 'LIFSI',
          dataIndex: 'param12',
          width: 150,
          scopedSlots: { customRender: 'totalPrice' }
        },
        {
          title: 'F-160C',
          dataIndex: 'param13',
          width: 150,
          scopedSlots: { customRender: 'totalPrice' }
        },
        {
          title: 'GS-907',
          dataIndex: 'param14',
          width: 150,
          scopedSlots: { customRender: 'totalPrice' }
        },
        {
          title: 'GS-908',
          dataIndex: 'param15',
          width: 150,
          scopedSlots: { customRender: 'totalPrice' }
        },
        {
          title: 'GS-905',
          dataIndex: 'param16',
          width: 150,
          scopedSlots: { customRender: 'totalPrice' }
        },
        {
          title: '操作',
          key: 'action',
          width: 120,
          fixed: 'right',
          align: 'center',
          scopedSlots: { customRender: 'action' }
        }
      ],
      data: [],
      index: 1,
      user: this.$store.getters.userInfo,
      selectedRowKeys: [],
      selectedRows: [],
      options: {
        rowSelection: {
          selectedRowKeys: this.selectedRowKeys
        }
      }
    }
  },
  props: {
  },
  created () {
    // 下拉框map
    this.typeMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.IN_STORE_FORM_TYPE)
    this.data = JSON.parse(localStorage.getItem('test'))
    if (this.data != null) {
      this.index = this.data.length + 1
    } else {
      this.data = []
    }
  },
  methods: {
    base (record) {
      this.visible = true
      // 如果是空标识添加
      if (this.BaseTool.Object.isBlank(record)) {
        this.modalTitle = '添加'
        this.data = []
      }
    },
    save () {
      const { form: { validateFieldsAndScroll } } = this
      this.confirmLoading = true
      validateFieldsAndScroll((errors, values) => {
        if (errors) {
          this.confirmLoading = false
          return
        }
        if (values.id == null) {
          var str = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'
          var result = ''
          var length = 16
          for (var i = length; i > 0; --i) { result += str[Math.floor(Math.random() * str.length)] }
          values.id = result
          values.param4 = this.BaseTool.Date.formatter(values.param4, this.BaseTool.Date.PICKER_NORM_DATETIME_PATTERN)
          this.data.push(values)
          this.$message.info('更新成功')
          this.confirmLoading = false
        } else {
          const data = [...this.data]
          this.data = data.filter(item => values.id !== item.id)
          var str = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'
          var result = ''
          var length = 16
          for (var i = length; i > 0; --i) { result += str[Math.floor(Math.random() * str.length)] }
          values.id = result
          this.data.push(values)
        }
        localStorage.setItem('test', JSON.stringify(this.data))
        this.form.resetFields()
      })
    },
    handleCancel (values) {
      this.visible = false
      this.confirmLoading = false
      this.form.resetFields()
      if (this.BaseTool.Object.isNotBlank(values)) {
        this.$emit('ok', values)
      } else {
        this.$emit('ok')
      }
    },
    handleEdit (record) {
      record.param4 = this.BaseTool.Date.formatter(record.param4, this.BaseTool.Date.PICKER_NORM_DATETIME_PATTERN)
      const { form: { setFieldsValue } } = this
      // 日期处理
      this.$nextTick(() => {
        setFieldsValue(record)
      })
    },
    handleDelOne (id) {
      const data = [...this.data]
      this.data = data.filter(item => id !== item.id)
      localStorage.setItem('test', JSON.stringify(this.data))
    },
    showModel () {
      this.$message.info('后期如果配置了公式，这里则可以选择计算公示，自动计算。')
    }
  }
}
</script>