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"
        :rules="rules"
        ref="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
                v-model="form.month"
                value-format="yyyy-MM-dd"
                type="month"
                clearable
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="1.5">
            <el-form-item label="客户" prop="customer">
              <dr-popover-select
                size="mini"
                v-model="form.customerName"
                title="客户选择"
                type="CUSTOMER_PARAM_ZT"
                :dataMapping="{
                  customer: 'id',
                  customerName: 'name',
                }"
                :source.sync="form"
              >
              </dr-popover-select>
            </el-form-item>
          </el-col>
          <el-col :span="1.5">
            <el-form-item label="创建日期" prop="createTime">
              <el-date-picker
                v-model="form.createTime"
                clearable
                type="date"
                value-format="yyyy-MM-dd"
                readonly
              >
              </el-date-picker>
            </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: 800px">
      <div style="position: relative">
        <el-tabs v-model="activeName" @tab-click="useSwitchTab">
          <el-tab-pane label="明细" name="item">
            <el-table :data="items" height="700px" size="size">
              <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="150"
                prop="unitName"
              />
              <el-table-column
                show-overflow-tooltip
                label="价格（元）"
                align="center"
                width="150"
                prop="price"
              >
                <template slot-scope="scope">
                  <el-input-number
                    size="mini"
                    style="width: 130px"
                    v-model="scope.row.price"
                    :controls="false"
                  >
                  </el-input-number>
                </template>
              </el-table-column>
              <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="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="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="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="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="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="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="twentyEighth"
                  v-if="numDay > '28'"
                >
                  <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="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>
              <el-table-column
                fixed="right"
                label="操作"
                align="center"
                width="50"
              >
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    size="mini"
                    @click="useRowRemove(scope.$index, scope.row)"
                    >删行</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
        <div style="position: absolute; right: 10px; top: 5px; display: flex">
          <Choosematerial @addRow="addRow" :form="form"></Choosematerial>
          <Addmaterial @addRow="addRow"></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 {
  addAssess,
  updateAssess,
  getAssess,
} from "@/api/business/spd/fillin/dailysale_quantity_assess";
import Addmaterial from "./addmaterial";
import Choosematerial from "./choosematerial";
export default {
  name: "dailysaleQuantityAssessDetail",
  components: { Addmaterial, Choosematerial },
  props: ["openMode", "row"],
  data() {
    return {
      form: {
        customer: null,
        customerName: null,
        items: [],
        //所选月份天数
        numDay:31,
      },
      //表单校验
      rules: {
        month: [{ required: true, message: "月份不能为空", trigger: "blur" }],
        customer: [
          { required: true, message: "客户不能为空", trigger: "blur" },
        ],
      },
      activeName: "item",
    };
  },
  watch: {
	'form.month': {
        handler(newVal) {
            var curDate = new Date(newVal);
            console.log('curDate',curDate);
            /* 获取当前月份 */
            var curMonth = curDate.getMonth();
            /*  生成实际的月份: 由于curMonth会比实际月份小1, 故需加1 */
            curDate.setMonth(curMonth + 1);
            /* 将日期设置为0, 这里为什么要这样设置, 我不知道原因, 这是从网上学来的 */
            curDate.setDate(0);
            /* 返回当月的天数 */
            this.numDay = curDate.getDate();
        },
        immediate:true,
    }
  },
  computed: {
    items() {
      return this.form.items.filter(({ delFlag }) => delFlag !== "2");
    },
  },
  async created() {
    switch (this.openMode) {
      case "add":
        var now = new Date(); // 当前日期
        var nowYear = now.getFullYear(); //当前年
        var nowMonth = now.getMonth() ;
        this.form.month = new Date(nowYear,nowMonth,1,"00","00");
        // this.form.createTime = new Date();
        this.form.createByName = this.$store.state.user.nickName;
        this.form.dept = this.$store.state.user.deptId;
        this.form.deptName = this.$store.state.user.deptName;
        break;
      case "edit":
        await this.fetchAssess(this.row.id);
        break;
      case "see":
        await this.fetchAssess(this.row.id);
        break;
    }
  },
  methods: {
    //保存
    async useSave() {
      this.$refs["form"].validate(async (valid) => {
        if (valid) {
          try {
            let checkRes = this.checkBeforeSave(this.form);
            if (!checkRes) {
              return;
            }
            this.loading = true;
            let res = null;
            if (this.openMode === "add") {
              res = await addAssess(this.form);
            }
            if (this.openMode === "edit") {
              res = await updateAssess(this.form);
            }
            if (res.code === 200) {
              this.$modal.msgSuccess("保存成功");
              this.useBack();
            }
          } catch (err) {
            console.error(err);
          } finally {
            this.loading = false;
          }
        } else {
          return false;
        }
      });
    },
    //保存前校验
    checkBeforeSave(form) {
      return true;
    },
    //查询详情
    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;
      }
    },
    //增行
    addRow(rows) {
      console.log("rows", rows);
      for (let i in rows) {
        this.form.items.push({
          delFlag: "0",
          $index: new Date().getTime(),
          ...rows[i],
        });
      }
    },
    //删行
    async useRowRemove(index, row) {
      console.log("index", index);
      console.log("row", row);
      if (row.id) {
        this.form.items.forEach((e) => {
          if (e.id == row.id) {
            e.delFlag = "2";
          }
        });
      } else {
        this.form.items.splice(index, 1);
      }
    },
    //切换多页签
    useSwitchTab() {},
    //返回
    useBack() {
      this.$parent.useOpenDetail();
      this.$parent.useSearch();
    },
    //获取当月天数
    getCountDays(val) {
        console.log('val',val);
        var curDate = new Date(val);
        console.log('curDate',curDate);
        /* 获取当前月份 */
        var curMonth = curDate.getMonth();
        /*  生成实际的月份: 由于curMonth会比实际月份小1, 故需加1 */
        curDate.setMonth(curMonth + 1);
        /* 将日期设置为0, 这里为什么要这样设置, 我不知道原因, 这是从网上学来的 */
        curDate.setDate(0);
        /* 返回当月的天数 */
        return curDate.getDate();
    }
  },
};
</script>

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