drp-ui/src/views/business/spd/fillin/dailysale_quantity_assess/detail.vue

<template>
  <div>
    <el-card>
      <el-button size="mini" plain @click="useBack">返回</el-button>
      <el-divider></el-divider>
      <el-form
        size="mini"
        :model="form"
        label-width="auto"
      >
        <el-row :gutter="10">
          <el-col :span="1.5">
            <el-form-item label="编码" prop="code">
              <el-input
                placeholder="自动生成"
                readonly
                v-model="form.code"
                style="width: 200px"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="1.5">
            <el-form-item label="月份" prop="month">
              <el-date-picker
                :readonly="this.openMode == 'edit' || this.openMode == 'see'"
                v-model="form.month"
                value-format="yyyy-MM"
                type="month"
                clearable
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="1.5">
            <el-form-item label="客户" prop="customer">
              <el-input
                placeholder="自动生成"
                readonly
                v-model="form.customerName"
                style="width: 200px"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="1.5">
            <el-form-item label="创建日期" prop="createTime">
              <el-input
                v-model="form.createTime"
                style="width: 200px"
                clearable
                readonly
              />
            </el-form-item>
          </el-col>
          <el-col :span="1.5">
            <el-form-item label="创建人" prop="createByName">
              <el-input
                v-model="form.createByName"
                style="width: 200px"
                clearable
                readonly
              />
            </el-form-item>
          </el-col>
          <el-col :span="1.5">
            <el-form-item label="部门" prop="deptName">
              <el-input
                v-model="form.deptName"
                style="width: 200px"
                clearable
                readonly
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card style="height: 750px">
      <div style="position: relative">
        <el-tabs v-model="activeName" @tab-click="useSwitchTab">
          <el-tab-pane label="明细" name="item">
            <el-table :data="items" height="600px" size="size" v-loading="loading">
              <el-table-column
                label="序号"
                type="index"
                width="50"
                align="center"
                fixed
              />
              <el-table-column
                show-overflow-tooltip
                label="一级品类"
                align="center"
                width="150"
                prop="oneClassName"
              />
              <el-table-column
                show-overflow-tooltip
                label="二级品类"
                align="center"
                width="150"
                prop="twoClassName"
              />
              <el-table-column
                show-overflow-tooltip
                label="物料编号"
                align="center"
                width="150"
                prop="materialCode"
              />
              <el-table-column
                show-overflow-tooltip
                label="物料名称"
                align="center"
                width="150"
                prop="materialName"
              />
              <el-table-column
                show-overflow-tooltip
                label="单位"
                align="center"
                width="100"
                prop="unitName"
              />
              <el-table-column
                show-overflow-tooltip
                label="价格（元）"
                align="center"
                width="100"
                prop="price"
              />
              <el-table-column
                show-overflow-tooltip
                label="日 销 售 数 据 填 报"
                align="center"
              >
                <el-table-column
                  show-overflow-tooltip
                  label="1"
                  align="center"
                  width="100"
                  prop="first"
                >
                  <template slot-scope="scope">
                    <el-input
                      size="mini"
                      v-model.number="scope.row.first"
                      class="input-view"
                      oninput="value=value.replace(/[^0-9]/g,'')"
                    />
                  </template>
                </el-table-column>
                <el-table-column
                  show-overflow-tooltip
                  label="2"
                  align="center"
                  width="100"
                  prop="second"
                >
                  <template slot-scope="scope">
                    <el-input
                      size="mini"
                      v-model.number="scope.row.second"
                      class="input-view"
                      oninput="value=value.replace(/[^0-9]/g,'')"
                    />
                  </template>
                </el-table-column>
                <el-table-column
                  show-overflow-tooltip
                  label="3"
                  align="center"
                  width="100"
                  prop="third"
                >
                  <template slot-scope="scope">
                    <el-input
                      size="mini"
                      v-model.number="scope.row.third"
                      class="input-view"
                      oninput="value=value.replace(/[^0-9]/g,'')"
                    />
                  </template>
                </el-table-column>
                <el-table-column
                  show-overflow-tooltip
                  label="4"
                  align="center"
                  width="100"
                  prop="fourth"
                >
                  <template slot-scope="scope">
                    <el-input
                      size="mini"
                      v-model.number="scope.row.fourth"
                      class="input-view"
                      oninput="value=value.replace(/[^0-9]/g,'')"
                    />
                  </template>
                </el-table-column>
                <el-table-column
                  show-overflow-tooltip
                  label="5"
                  align="center"
                  width="100"
                  prop="fifth"
                >
                  <template slot-scope="scope">
                    <el-input
                      size="mini"
                      v-model.number="scope.row.fifth"
                      class="input-view"
                      oninput="value=value.replace(/[^0-9]/g,'')"
                    />
                  </template>
                </el-table-column>
                <el-table-column
                  show-overflow-tooltip
                  label="6"
                  align="center"
                  width="100"
                  prop="sixth"
                >
                  <template slot-scope="scope">
                    <el-input
                      size="mini"
                      v-model.number="scope.row.sixth"
                      class="input-view"
                      oninput="value=value.replace(/[^0-9]/g,'')"
                    />
                  </template>
                </el-table-column>
                <el-table-column
                  show-overflow-tooltip
                  label="7"
                  align="center"
                  width="100"
                  prop="seventh"
                >
                  <template slot-scope="scope">
                    <el-input
                      size="mini"
                      v-model.number="scope.row.seventh"
                      class="input-view"
                      oninput="value=value.replace(/[^0-9]/g,'')"
                    />
                  </template>
                </el-table-column>
                <el-table-column
                  show-overflow-tooltip
                  label="8"
                  align="center"
                  width="100"
                  prop="eighth"
                >
                  <template slot-scope="scope">
                    <el-input
                      size="mini"
                      v-model.number="scope.row.eighth"
                      class="input-view"
                      oninput="value=value.replace(/[^0-9]/g,'')"
                    />
                  </template>
                </el-table-column>
                <el-table-column
                  show-overflow-tooltip
                  label="9"
                  align="center"
                  width="100"
                  prop="ninth"
                >
                  <template slot-scope="scope">
                    <el-input
                      size="mini"
                      v-model.number="scope.row.ninth"
                      class="input-view"
                      oninput="value=value.replace(/[^0-9]/g,'')"
                    />
                  </template>
                </el-table-column>
                <el-table-column
                  show-overflow-tooltip
                  label="10"
                  align="center"
                  width="100"
                  prop="tenth"
                >
                  <template slot-scope="scope">
                    <el-input
                      size="mini"
                      v-model.number="scope.row.tenth"
                      class="input-view"
                      oninput="value=value.replace(/[^0-9]/g,'')"
                    />
                  </template>
                </el-table-column>
                <el-table-column
                  show-overflow-tooltip
                  label="11"
                  align="center"
                  width="100"
                  prop="eleventh"
                >
                  <template slot-scope="scope">
                    <el-input
                      size="mini"
                      v-model.number="scope.row.eleventh"
                      class="input-view"
                      oninput="value=value.replace(/[^0-9]/g,'')"
                    />
                  </template>
                </el-table-column>
                <el-table-column
                  show-overflow-tooltip
                  label="12"
                  align="center"
                  width="100"
                  prop="twelfth"
                >
                  <template slot-scope="scope">
                    <el-input
                      size="mini"
                      v-model.number="scope.row.twelfth"
                      class="input-view"
                      oninput="value=value.replace(/[^0-9]/g,'')"
                    />
                  </template>
                </el-table-column>
                <el-table-column
                  show-overflow-tooltip
                  label="13"
                  align="center"
                  width="100"
                  prop="thirteenth"
                >
                  <template slot-scope="scope">
                    <el-input
                      size="mini"
                      v-model.number="scope.row.thirteenth"
                      class="input-view"
                      oninput="value=value.replace(/[^0-9]/g,'')"
                    />
                  </template>
                </el-table-column>
                <el-table-column
                  show-overflow-tooltip
                  label="14"
                  align="center"
                  width="100"
                  prop="fourteenth"
                >
                  <template slot-scope="scope">
                    <el-input
                      size="mini"
                      v-model.number="scope.row.fourteenth"
                      class="input-view"
                      oninput="value=value.replace(/[^0-9]/g,'')"
                    />
                  </template>
                </el-table-column>
                <el-table-column
                  show-overflow-tooltip
                  label="15"
                  align="center"
                  width="100"
                  prop="fifteenth"
                >
                  <template slot-scope="scope">
                    <el-input
                      size="mini"
                      v-model.number="scope.row.fifteenth"
                      class="input-view"
                      oninput="value=value.replace(/[^0-9]/g,'')"
                    />
                  </template>
                </el-table-column>
                <el-table-column
                  show-overflow-tooltip
                  label="16"
                  align="center"
                  width="100"
                  prop="sixteenth"
                >
                  <template slot-scope="scope">
                    <el-input
                      size="mini"
                      v-model.number="scope.row.sixteenth"
                      class="input-view"
                      oninput="value=value.replace(/[^0-9]/g,'')"
                    />
                  </template>
                </el-table-column>
                <el-table-column
                  show-overflow-tooltip
                  label="17"
                  align="center"
                  width="100"
                  prop="seventeenth"
                >
                  <template slot-scope="scope">
                    <el-input
                      size="mini"
                      v-model.number="scope.row.seventeenth"
                      class="input-view"
                      oninput="value=value.replace(/[^0-9]/g,'')"
                    />
                  </template>
                </el-table-column>
                <el-table-column
                  show-overflow-tooltip
                  label="18"
                  align="center"
                  width="100"
                  prop="eighteenth"
                >
                  <template slot-scope="scope">
                    <el-input
                      size="mini"
                      v-model.number="scope.row.eighteenth"
                      class="input-view"
                      oninput="value=value.replace(/[^0-9]/g,'')"
                    />
                  </template>
                </el-table-column>
                <el-table-column
                  show-overflow-tooltip
                  label="19"
                  align="center"
                  width="100"
                  prop="nineteenth"
                >
                  <template slot-scope="scope">
                    <el-input
                      size="mini"
                      v-model.number="scope.row.nineteenth"
                      class="input-view"
                      oninput="value=value.replace(/[^0-9]/g,'')"
                    />
                  </template>
                </el-table-column>
                <el-table-column
                  show-overflow-tooltip
                  label="20"
                  align="center"
                  width="100"
                  prop="twentieth"
                >
                  <template slot-scope="scope">
                    <el-input
                      size="mini"
                      v-model.number="scope.row.twentieth"
                      class="input-view"
                      oninput="value=value.replace(/[^0-9]/g,'')"
                    />
                  </template>
                </el-table-column>
                <el-table-column
                  show-overflow-tooltip
                  label="21"
                  align="center"
                  width="100"
                  prop="twentyFirst"
                >
                  <template slot-scope="scope">
                    <el-input
                      size="mini"
                      v-model.number="scope.row.twentyFirst"
                      class="input-view"
                      oninput="value=value.replace(/[^0-9]/g,'')"
                    />
                  </template>
                </el-table-column>
                <el-table-column
                  show-overflow-tooltip
                  label="22"
                  align="center"
                  width="100"
                  prop="twentySecond"
                >
                  <template slot-scope="scope">
                    <el-input
                      size="mini"
                      v-model.number="scope.row.twentySecond"
                      class="input-view"
                      oninput="value=value.replace(/[^0-9]/g,'')"
                    />
                  </template>
                </el-table-column>
                <el-table-column
                  show-overflow-tooltip
                  label="23"
                  align="center"
                  width="100"
                  prop="twentyThird"
                >
                  <template slot-scope="scope">
                    <el-input
                      size="mini"
                      v-model.number="scope.row.twentyThird"
                      class="input-view"
                      oninput="value=value.replace(/[^0-9]/g,'')"
                    />
                  </template>
                </el-table-column>
                <el-table-column
                  show-overflow-tooltip
                  label="24"
                  align="center"
                  width="100"
                  prop="twentyFourth"
                >
                  <template slot-scope="scope">
                    <el-input
                      size="mini"
                      v-model.number="scope.row.twentyFourth"
                      class="input-view"
                      oninput="value=value.replace(/[^0-9]/g,'')"
                    />
                  </template>
                </el-table-column>
                <el-table-column
                  show-overflow-tooltip
                  label="25"
                  align="center"
                  width="100"
                  prop="twentyFifth"
                >
                  <template slot-scope="scope">
                    <el-input
                      size="mini"
                      v-model.number="scope.row.twentyFifth"
                      class="input-view"
                      oninput="value=value.replace(/[^0-9]/g,'')"
                    />
                  </template>
                </el-table-column>
                <el-table-column
                  show-overflow-tooltip
                  label="26"
                  align="center"
                  width="100"
                  prop="twentySixth"
                >
                  <template slot-scope="scope">
                    <el-input
                      size="mini"
                      v-model.number="scope.row.twentySixth"
                      class="input-view"
                      oninput="value=value.replace(/[^0-9]/g,'')"
                    />
                  </template>
                </el-table-column>
                <el-table-column
                  show-overflow-tooltip
                  label="27"
                  align="center"
                  width="100"
                  prop="twentySeventh"
                >
                  <template slot-scope="scope">
                    <el-input
                      size="mini"
                      v-model.number="scope.row.twentySeventh"
                      class="input-view"
                      oninput="value=value.replace(/[^0-9]/g,'')"
                    />
                  </template>
                </el-table-column>
                <el-table-column
                  show-overflow-tooltip
                  label="28"
                  align="center"
                  width="100"
                  prop="twentyEighth"
                  v-if="numDay > '27'"
                >
                  <template slot-scope="scope">
                    <el-input
                      size="mini"
                      v-model.number="scope.row.twentyEighth"
                      class="input-view"
                      oninput="value=value.replace(/[^0-9]/g,'')"
                    />
                  </template>
                </el-table-column>
                <el-table-column
                  show-overflow-tooltip
                  label="29"
                  align="center"
                  width="100"
                  prop="twentyNinth"
                  v-if="numDay > '28'"
                >
                  <template slot-scope="scope">
                    <el-input
                      size="mini"
                      v-model.number="scope.row.twentyNinth"
                      class="input-view"
                      oninput="value=value.replace(/[^0-9]/g,'')"
                    />
                  </template>
                </el-table-column>
                <el-table-column
                  show-overflow-tooltip
                  label="30"
                  align="center"
                  width="100"
                  prop="thirtieth"
                  v-if="numDay > '29'"
                >
                  <template slot-scope="scope">
                    <el-input
                      size="mini"
                      v-model.number="scope.row.thirtieth"
                      class="input-view"
                      oninput="value=value.replace(/[^0-9]/g,'')"
                    />
                  </template>
                </el-table-column>
                <el-table-column
                  show-overflow-tooltip
                  label="31"
                  align="center"
                  width="100"
                  prop="thirtyFirst"
                  v-if="numDay > '30'"
                >
                  <template slot-scope="scope">
                    <el-input
                      size="mini"
                      v-model.number="scope.row.thirtyFirst"
                      class="input-view"
                      oninput="value=value.replace(/[^0-9]/g,'')"
                    />
                  </template>
                </el-table-column>
                <el-table-column
                  show-overflow-tooltip
                  label="合计数量"
                  align="center"
                  width="100"
                  prop="amount"
                />
                <el-table-column
                  show-overflow-tooltip
                  label="合计金额"
                  align="center"
                  width="100"
                  prop="money"
                />
              </el-table-column>
              <el-table-column
                fixed="right"
                label="操作"
                align="center"
                width="50"
              >
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    size="mini"
                    @click="useRowRemove(scope.row)"
                    >删行</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
        <el-pagination
            background
            @size-change="useChangePageSize"
            @current-change="useCurrentChange"
            :current-page="queryParams.pageNum"
            :page-sizes="[10, 15, 20]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total=total>
        </el-pagination>
        <div style="position: absolute; right: 10px; top: 5px; display: flex">
          <Choosematerial @useReset="useReset" :form="form"></Choosematerial>
          <Addmaterial @useReset="useReset" :form="form"></Addmaterial>
        </div>
      </div>
    </el-card>
    <el-card>
      <div class="btn_group">
        <el-col :span="1.5">
          <el-button size="mini" plain @click="useBack">取消</el-button>
        </el-col>
        <el-col :span="1.5" style="margin: 0 10px">
          <el-button type="primary" size="mini" plain @click="useSave"
            >保存</el-button
          >
        </el-col>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getAssess } from "@/api/business/spd/fillin/dailysale_quantity_assess";
import { listItem,saveItems,delItems } from "@/api/business/spd/fillin/dailysale_quantity_assess_item";
import Addmaterial from "./addmaterial";
import Choosematerial from "./choosematerial";
export default {
  name: "dailysaleQuantityAssessDetail",
  components: { Addmaterial, Choosematerial },
  props: ["openMode", "row"],
  data() {
    return {
      loading: false,
      //主表
      form: {},
      //所选月份天数
      numDay:31,
      //明细
      items:[],
      //明细查询条件
      queryParams:{
        dailysaleQuantityAssessId: null,
        pageNum:1,
        pageSize:10,
      },
      //总条数
      total: 0,
      activeName: "item",
    };
  },
  async created() {
    switch (this.openMode) {
      case "edit":
        await this.fetchAssess(this.row.id);
        await this.fetchItem(this.row.id);
        break;
      case "see":
        await this.fetchAssess(this.row.id);
        await this.fetchItem(this.row.id);
        break;
    }
    let arr = this.form.month.split('-');
    this.numDay = this.getDays(arr[0],arr[1]);
  },
  methods: {
    //保存
    async useSave() {
      this.loading = true;
      try {
        let res = null;
        if (this.openMode === "edit") {
          res = await saveItems(this.items);
        }
        if (res.code === 200) {
          this.$modal.msgSuccess("保存成功");
          this.useBack();
        }
      } catch (err) {
        console.error(err);
      } finally {
        this.loading = false;
      };
    },
    //查询详情
    async fetchAssess(id) {
      try {
        // try
        this.loading = true;
        const { code, data } = await getAssess(id);
        if (code === 200) {
          this.form = data;
          return true;
        } else {
          return false;
        }
      } catch (err) {
        // catch
        console.error(err);
      } finally {
        // finally
        this.loading = false;
      }
    },
    //查询明细
    async fetchItem(pid){
      this.loading = true;
      this.queryParams.dailysaleQuantityAssessId = pid;
      await listItem(this.queryParams).then(res => {
        if (res.code === 200) {
          this.items = res.rows
          this.total = res.total
          this.aggregate();
        }
        this.loading = false;
      })
    },
    //删行
    async useRowRemove(row) {
      let arr = [row.id];
      delItems(arr).then(res => {
        if (res.code === 200) {
           this.fetchItem(this.form.id);
        }
      })
    },
    //切换多页签
    useSwitchTab() {},
    //返回
    useBack() {
      this.$parent.useOpenDetail();
      this.$parent.useSearch();
    },
    //获取当前月份天数
    getDays(year, month){
      return new Date(year, month, 0).getDate()
    },
    //计算合计
    aggregate(){
      let num = ["first","second","third","fourth","fifth","sixth","seventh","eighth","ninth","tenth","eleventh","twelfth","thirteenth","fourteenth","fifteenth"
				,"twentyFirst","seventeenth","eighteenth","nineteenth","twentieth","twentyFirst","twentySecond","twentyThird","twentyFourth","twentyFifth","twentySixth","twentySeventh","twentyEighth","twentyNinth","thirtieth","thirtyFirst"];
      for(let i in this.items){
        let c = 0;
        for(let j in num){
          c = (this.items[i][num[j]] || 0) - 0 + c;
        }
        this.items[i].amount = c;
        this.items[i].money = c * (this.items[i].price || 0);
      }
      console.log('this.items222',this.items);
    },
    //改变一页显示条数
    async useChangePageSize(val){
      this.queryParams.pageSize = val
      await saveItems(this.items);
      await this.fetchItem(this.form.id);
    },
    //翻页
    async useCurrentChange(val){
      this.queryParams.pageNum = val
      await saveItems(this.items);
      await this.fetchItem(this.form.id);
    },
    //重置
    useReset(){
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
      }
      this.fetchItem(this.form.id);
      this.aggregate();
    },
  },
};
</script>

<style scoped lang="scss">
.btn_group {
  width: 100%;
  margin: 20px 0;
  display: flex;
  justify-content: right;
}
.el-pagination {
  margin-top: 10px;
  text-align: right;
}
</style>