zfire-newmall-admin/src/components/WarehousingHeader/WarehousingHeader.vue

<template>
  <div class="warehousing">
    <el-form v-if="pageType === 'add'" label-position="left" label-width="120px" :model="screenForm" size="mini">
      <el-row :gutter="20">
        <el-col :xs="24" :ms="8" :lg="8">
          <el-form-item label="商家编号" prop="customerNumber">
            <el-input disabled v-model="screenForm.customerNumber" placeholder="商家编号" size="mini" />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :ms="8" :lg="8">
          <el-form-item label="商家名称" prop="customerName">
            <el-input disabled v-model="screenForm.customerName" placeholder="商家名称" size="mini" />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :ms="8" :lg="8">
          <el-form-item label="调整日期" prop="changeTime">
            <el-date-picker disabled v-model="screenForm.changeTime" type="datetime" size="mini"
              value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期" :default-value="new Date()"/>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :ms="8" :lg="8">
          <el-form-item label="制单人" prop="createBy">
            <el-input disabled v-model="screenForm.createBy" placeholder="制单人" size="mini" />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :ms="8" :lg="8">
          <el-form-item label="制单时间" prop="createTime">
            <el-date-picker disabled v-model="screenForm.createTime" type="datetime" size="mini" 
              value-format="yyyy-MM-dd HH:mm:ss" :default-value="new Date()" placeholder="选择日期" />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :ms="24" :lg="24">
          <el-form-item label="备注" prop="remark">
            <el-input v-model="screenForm.remark" placeholder="备注" size="mini" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div v-else>
      <h5>单据信息</h5>
      <div class="diy-table-1">
        <el-row>
          <el-col :span="6" class="item">
            <div class="label">调整单号</div>
            <div class="value">{{ details.id }}</div>
          </el-col>
          <el-col :span="6" class="item">
            <div class="label">商家编号</div>
            <div class="value">{{ details.customerNumber }}</div>
          </el-col>
          <el-col :span="6" class="item">
            <div class="label">商家名称</div>
            <div class="value">{{ details.customerName }}</div>
          </el-col>
          <el-col :span="6" class="item">
            <div class="label">调整日期</div>
            <div class="value">{{ details.changeTime }}</div>
          </el-col>
          <el-col :span="6" class="item">
            <div class="label">制单人</div>
            <div class="value">{{ details.createBy }}</div>
          </el-col>
          <el-col :span="18" class="item">
            <div class="label">制单时间</div>
            <div class="value">{{ details.createTime }}</div>
          </el-col>
          <el-col :span="24" class="item">
            <div class="label">备注</div>
            <div class="value">{{ details.remark }}</div>
          </el-col>

        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import { dateFormat } from '@/utils/util';
export default {
  name: 'WarehousingHeader',
  props: {
    pageType: {
      type: String,
      default: 'add'
    },
    details: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      screenForm: {
        changeTime: '' || this.nowDate(),
        createBy: JSON.parse(localStorage.getItem('supply_user')).nickName || '',
        createTime: ''|| this.nowDate(),
        customerName: '',
        customerNumber: '',
        remark: ''
      },
      rules: {
        customerNumber: [
          { required: true, message: '请输入商家编号', trigger: 'blur' }
        ],
        customerName: [
          { required: true, message: '请输入商家名称', trigger: 'blur' }
        ],
        changeTime: [
          { required: true, message: '请选择调整日期', trigger: 'blur' }
        ],
        createBy: [
          { required: true, message: '请选择制单人', trigger: 'blur' }
        ],
        createTime: [
          { required: true, message: '请选择制单时间', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.nowDate()
  },
  methods: {
    // 获取当前时间
    nowDate() {
      var dt = new Date(),               // 获取时间
        Y = dt.getFullYear(),            //获取 年 (四位)
        Mont = dt.getMonth() + 1,      //获取 月 (0-11,0代表1月)
        Day = dt.getDate(),               //获取 日 （1-31）
        Hous = dt.getHours(),         //获取 小时 (0-23)
        Min = dt.getMinutes(),          //获取 分(0-59)
        Sec = dt.getSeconds();       //获取秒 (0-59)
      return `${Y}-${Mont}-${Day} ${Hous}:${Min}:${Sec}`

    },
  }
}
</script>

<style scoped lang="scss">
.warehousing {
  margin: 20px;
  padding: 20px;
  box-shadow: 0 0 8px 0 rgb(0 0 0 / 20%);
}
</style>