Vue_New/src/xt_pages/stock/inventoryTransfer/Addtrans.vue

<template>
  <div class="main-contain">
    <div class="position">
      <bread-crumb :crumbs="crumbs"></bread-crumb>
      <div>
        <el-button type="primary" @click="save">保存</el-button>
        <el-button type="warning" @click="examine">审核</el-button>
      </div>
    </div>
    <div class="app-container">
      <div
        style="
          justify-content: flex-start;
          margin: 0px 0 12px 0;
          display: flex;
          align-items: center;
        "
      >
        <el-form
          :inline="true"
          :rules="rules"
          :model="formInline"
          class="demo-form-inline"
        >
          <el-form-item label="单据日期：">
            <el-date-picker
              v-model="value1"
              type="date"
              placeholder="选择日期"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="调出仓库：" prop="region">
            <el-select v-model="formInline.region" placeholder="活动区域">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="调入仓库：" prop="region">
            <el-select v-model="formInline.region" placeholder="活动区域">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <el-table
        :row-style="changColor"
        :header-cell-style="{
          backgroundColor: 'rgb(245, 247, 250)',
          color: '#606266',
        }"
        :data="tableData"
        :class="signAndWeighBoxPatients"
        border
      >
        >
        <el-table-column label="单据编号" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.drug_name ? scope.row.drug_name : "" }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center">
          <template slot="header" slot-scope="scope">
            商品名称<span style="color:red;">*</span>
          </template>
          <template slot-scope="scope">
        <span>{{ scope.row.Count ? scope.row.Count : "" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="商品类型" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.Count ? scope.row.Count : "" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="规格&&单位" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.outCount ? scope.row.outCount : "" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="调拨数量" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.outCount ? scope.row.outCount : "" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="库存总数" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.outCount ? scope.row.outCount : "" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="制单人" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.outCount ? scope.row.outCount : "" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="备注" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.outCount ? scope.row.outCount : "" }}</span>
          </template>
        </el-table-column>



        <el-table-column label="操作" align="center" width="260px">
          <template slot-scope="scope">
            <el-tooltip class="item" content="新增" placement="top-start">
              <el-button
                icon="el-icon-plus"
                size="small"
                type="primary"
                @click="toAdd(scope.row)"
              >
              </el-button>
            </el-tooltip>

            <el-tooltip class="item" content="删除" placement="top-start">
              <el-button
                icon="el-icon-delete"
                size="small"
                type="danger"
                @click="toDelete(scope.row, scope.row.$index)"
              >
              </el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 50, 100, 200, 500, 1000]"
        :page-size="10"
        background
        align="right"
        style="margin-top: 20px"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import BreadCrumb from "@/xt_pages/components/bread-crumb";
export default {
  components: {
    BreadCrumb,
  },
  data() {
    return {
      crumbs: [
        { path: false, name: "库房管理" },
        { path: "/stock/warehousequery", name: "新增调拨" },
      ],
      value1: "",
      total: 0,
      page: 1,
      limit: 10,
      tableData: [{}, {}],
      formInline: {
        user: "",
        region: "",
      },
      rules: {
        region: [
          { required: true, message: "请选择活动区域", trigger: "change" },
        ],
      },
    };
  },

  methods: {
    // 初始化数据
    init() {},

    // 反审核
    approval() {},

    // 审核
    examine() {},

    // 保存
    save() {},

    // 表单添加
    toAdd() {},

    // 删除
    toDelete() {},

    // 详情查看
    toDetails() {},

    // 表单全选
    handleSelectionChange() {},

    // 页表操作
    handleSizeChange(val) {
      this.limit = val;
      this.init();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.init();
    },

    // 表格样式
    changColor({ rowIndex }) {
      if (rowIndex % 2 == 1) {
        return {
          backgroundColor: "#C4E1FF",
          color: "#303133",
        };
      } else {
        return {
          backgroundColor: "#ACD6FF",
          color: "#303133",
        };
      }
    },
  },
};
</script>

<style rel="stylesheet/css" lang="scss" scoped>
</style>