初始化提交

Crunchy

2025-06-14 7e460156de73171f9660ce48f80703e79f8b478d

 src/views/out_operation/manual/index.vue

@@ -1,15 +1,330 @@
<template>
  <div class="manual">
    手动出库
  <div class="outOperation">
    <div class="outOperation-main">
     <el-row type="flex" align="middle" class="main-top">
      <el-col :span="2">出库台账</el-col>
      <el-col :span="20">
        <div class="table-search">
    <el-form
      v-model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      label-width="68px"
    >
      <el-form-item label="日期：">
        <el-date-picker
          v-model="queryParams.date"
          type="datetimerange"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          align="right"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="客户名称">
        <el-select v-model="queryParams.type" placeholder="规格型号" clearable style="width: 240px">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini"
          @click="search">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini">导出</el-button>
      </el-form-item>
    </el-form>
  </div>
      </el-col>
     </el-row>
    <el-table
      :stripe="true"
      :data="tableData"
      :cell-style="{ textAlign: 'center' }"
      :header-cell-style="{ textAlign: 'center' }"
      :border="true"
      header-row-class-name="table-header"
    >
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        prop="name"
        label="产品编码">
      </el-table-column>
      <el-table-column
        prop="address"
        label="产品名称">
      </el-table-column>
      <el-table-column
        prop="date"
        label="规格型号">
      </el-table-column>
      <el-table-column
        prop="date"
        label="单位">
      </el-table-column>
      <el-table-column
        prop="date"
        label="出库数量">
      </el-table-column>
      <el-table-column
        prop="date"
        label="发货人">
      </el-table-column>
      <el-table-column
        prop="date"
        label="出库日期">
      </el-table-column>
    </el-table>
    </div>
    <div class="outOperation-foot">
        <el-pagination
        :current-page="searchModel.pageNo"
        :page-sizes="[10, 15, 20, 25]"
        :page-size="searchModel.pageSize"
        layout="->, total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        >
      </el-pagination>
    </div>
    <el-dialog title="押运单打印" :visible.sync="orderFormVisible">
      <el-form label-position="left" :model="orderParams">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="订单号" :label-width="formLabelWidth">
              <el-input v-model="orderParams.number" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="押运单编号" :label-width="formLabelWidth">
              <el-input v-model="orderParams.noId" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="客户订单号" :label-width="formLabelWidth">
              <el-input v-model="orderParams.clientNumber" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="发货日期" :label-width="formLabelWidth">
              <el-input v-model="orderParams.date" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="客户名称" :label-width="formLabelWidth">
              <el-input v-model="orderParams.clientName" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="发货人" :label-width="formLabelWidth">
              <el-input v-model="orderParams.consigner" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col>
            <el-form-item label="到货地址" :label-width="formLabelWidth">
              <el-input v-model="orderParams.address" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col>
            <el-form-item label="收货联系人" :label-width="formLabelWidth">
              <el-input v-model="orderParams.consignee" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col>
            <el-form-item label="手机号" :label-width="formLabelWidth">
              <el-input v-model="orderParams.phoneNumber" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col>
            <el-form-item>
              <el-table :data="tableData" header-row-class-name="table-header">
                <el-table-column property="date" label="产品名称" ></el-table-column>
                <el-table-column property="name" label="规格型号"></el-table-column>
                <el-table-column property="address" label="单位"></el-table-column>
                <el-table-column property="number" label="发库数量"></el-table-column>
              </el-table>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer" >
        <el-button type="primary" @click="print">确 定</el-button>
        <el-button @click="addFormVisible = false" >取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getList } from '@/api/table'
import TableSearch from '@/components/TableSearch'
export default {

  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      formLabelWidth: '120px',
      orderFormVisible: false,
      orderParams: {
        number: '',//订单号
        noId: '', //押运单编号
        orderParams: '', //客户订单号
        date: '',
        clientName: '',
        consigner: '',
        address: '',
        consignee: '',
        phoneNumber: ''
      },
      total: 0,
      searchModel: {
        pageNo: 1,
        pageSize: 10
      },
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          number: ''
        },
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          number: ''
        },
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          number: ''
        }
      ],
      queryParams: {
        date: '',
        type: ''
      },
      pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
      },
      options: [
        {
          value: '第一种型号',
          label: '第一种型号'
        }
      ]
    }
  },
  created() {
    this.fetchData()
  },
  components: {
    TableSearch
  },
  methods: {
    print() {
      //货运单打印参数
      console.log(this.orderParams)
    },
    fetchData() {
      this.listLoading = true
      getList().then(response => {
        this.list = response.data.items
        this.listLoading = false
      })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    },
    search() {
      // "查询条件："时间需要格式化成yyyy-mm-dd hh-mm-ss
      console.log(this.queryParams)
    }
  }
}
</script>

<style>

<style lang="scss" scoped>
@import '../../../styles/variables.scss';
.outOperation {
 min-height: calc(100vh - 50px);
 padding: 25px;
 background: $mainBg;
 .dialog-footer{
  text-align: center;
 }
 .outOperation-main{
  background: #fff;
  padding: 20px;
  .main-top{}
  .table-header{
    background: #6095FB;
  }
 }
 .outOperation-foot{
  margin-top: 25px;
  .el-pagination{
    display: flex;
    justify-content: center;
  }
 }
}
</style>