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

<template>
  <div>
    <div v-if="!openDetail">
      <el-card>
        <el-form size="mini" class="search_area" label-width="120px">
          <el-row :gutter="10">
            <el-col :span="1.5">
              <el-form-item label="客户名称">
                <el-input
                  v-model="queryParams.customerName"
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :span="1.5">
              <el-form-item label="年度">
                <el-date-picker
                  v-model="queryParams.month"
                  type="month"
                  value-format="yyyy-MM"
                  clearable
                  >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="1.5">
              <el-form-item label="创建人">
                <el-input
                  v-model="queryParams.createByName"
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :span="1.5">
              <el-form-item label="部门">
                <el-input
                  v-model="queryParams.deptName"
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :span="1.5">
              <el-form-item label="" label-width="20px">
                <el-button type="primary" size="mini" icon="el-icon-search" plain @click="useSearch">搜索</el-button>
                <el-button size="mini" icon="el-icon-refresh" plain @click="useReset">重置</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-divider></el-divider>
        <div class="btn_grooup">
          <el-button type="primary" size="mini" @click="useAdd">新增</el-button>
        </div>

        <el-table
          :data="tableList"
          @row-dblclick="useDoubleClick"
          v-loading="loading"
          height="600px"
        >
          <el-table-column label="序号" type="index" width="50" align="center" fixed/>
          <el-table-column show-overflow-tooltip label="编码" align="center" width="200" prop="code"/>
          <el-table-column show-overflow-tooltip label="客户名称" align="center" width="200" prop="customerName"/>
          <el-table-column show-overflow-tooltip label="月度" align="center" width="200" prop="month"/>
          <el-table-column show-overflow-tooltip label="部门" align="center" width="200" prop="deptName"/>
          <el-table-column show-overflow-tooltip label="创建人" align="center" width="200" prop="createByName" />
          <el-table-column show-overflow-tooltip label="创建时间" align="center" width="200" prop="createTime" />
          <el-table-column show-overflow-tooltip label="修改人" align="center" width="200" prop="updateByName" />
          <el-table-column show-overflow-tooltip label="修改时间" align="center" width="200" prop="updateTime" />
          <el-table-column fixed="right" label="操作" align="center" width="150">
            <template slot-scope="scope">
              <el-button type="text" size="mini" @click="useEdit(scope.row)">填报</el-button>
              <el-button type="text" size="mini" @click="useDel(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <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>
      </el-card>
    </div>
    <Detail v-if="openDetail" :openMode="openMode" :row="row"/>

    <!-- 新增填报对话框 -->
    <el-dialog
      title="新增"
      :visible.sync="open"
      width="1000px"
      append-to-body
    >
      <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
                :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">
              <dr-popover-select
                :readonly="this.openMode == 'edit' || this.openMode == 'see'"
                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-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>
      <div slot="footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Detail from './detail.vue'
import { addAssess,listAssess,delAssess, } from "@/api/business/spd/fillin/dailysale_quantity_assess";

export default {
  name: "dailysaleQuantityAssess",
  components: {Detail},
  data() {
    return {
      loading: false,
      // 是否显示弹出层
      open: false,
      //新增表单
      form: {
        month: "",
        customer: "",
        customerName: "",
      },
      //表单校验
      rules: {
        month: [{ required: true, message: "月份不能为空", trigger: "blur" }],
        customer: [
          { required: true, message: "客户不能为空", trigger: "blur" },
        ],
      },
      // 搜索框参数
      queryParams: {
        customerName:null,
        month:null,
        deptName:null,
        deptName:null,
        pageNum: 1,
        pageSize: 10,
      },
      //总条数
      total: 0,
      //列表数据
      tableList:[],
      //是否打开详情页面
      openDetail:false,
      //编辑页面打开方式，add或edit或see
      openMode:'',
      //行数据
      row:{},
    };
  },
  created() {
    this.getList(this.queryParams);
  },
  methods: {
    //是否打开详情页面
    useOpenDetail(){
      this.openDetail = !this.openDetail;
    },
    //新增
    useAdd(){
      this.reset();
      this.form.createTime = this.getCurrentTime();
      this.form.month = this.getCurrentMonth();
      this.form.createByName = this.$store.state.user.nickName;
      this.form.dept = this.$store.state.user.deptId;
      this.form.deptName = this.$store.state.user.deptName;
      this.open = true;
    },
    //编辑
    async useEdit(row){
      this.openMode = 'edit';
      this.row = row;
      this.openDetail = true;
    },
    //删除
    async useDel(row){
      this.$modal.confirm('确认删除选择数据').then(() => {
        delAssess(row.id).then(res => {
          if (res.code === 200) {
            this.$modal.msgSuccess("删除成功");
            this.getList(this.queryParams);
          }
        })
      }).catch(() => {})
    },
    //查询列表
    getList(params){
      this.loading = true;
      listAssess(params).then(res => {
        if (res.code === 200) {
          this.tableList = res.rows
          this.total = res.total
        }
        this.loading = false;
      })
    },
    //双击
    useDoubleClick(row){
      this.openMode = 'see';
      this.row = row;
      this.openDetail = true;
    },
    //改变一页显示条数
    useChangePageSize(val){
      this.queryParams.pageSize = val
      this.getList(this.queryParams)
    },
    //翻页
    useCurrentChange(val){
      this.queryParams.pageNum = val
      this.getList(this.queryParams)
    },
    //搜索
    useSearch() {
      console.log(this.queryParams);
      this.getList(this.queryParams);
    },
    //重置
    useReset(){
      this.queryParams = {
        customerName:null,
        month:null,
        deptName:null,
        deptName:null,
        pageNum: 1,
        pageSize: 10,
      }
      this.getList(this.queryParams);
    },
    //重置表单
    reset(){
      this.form = {
        month: "",
        customer: "",
        customerName: "",
      }
    },
    // 确认
    async submitForm() {
      this.$refs["form"].validate(async (valid) => {
        if (valid) {
          this.loading = true;
          try {
            let res = await addAssess(this.form);
            if (res.code === 200) {
              this.$modal.msgSuccess("保存成功");
              this.cancel();
              this.getList(this.queryParams);
            }
          } catch (err) {
            console.error(err);
          } finally {
            this.loading = false;
          }
        } else {
          return false;
        }
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    getCurrentTime() {
      var date = new Date();//当前时间
      var year = date.getFullYear() //年
      var month = this.repair(date.getMonth() + 1);//月
      var day = this.repair(date.getDate());//日
      var hour = this.repair(date.getHours());//时
      var minute = this.repair(date.getMinutes());//分
      var second = this.repair(date.getSeconds());//秒
      //当前时间 
      var curTime = year + "-" + month + "-" + day
              + " " + hour + ":" + minute + ":" + second;
      return curTime;
    },
    repair(i){
      if (i >= 0 && i <= 9) {
          return "0" + i;
      } else {
          return i;
      }
    },
     //获取当月
    getCurrentMonth(){
      const date = new Date()
      let year = date.getFullYear()
      let month = date.getMonth() + 1
      month = month > 9 ? month : '0' + month
      return `${year}-${month}`
    },
  },
};
</script>

<style scoped lang="scss">
.el-card {
  width: calc(100% - 20px);
  height: 100%;
  margin: 10px;
  padding: 20px;
}
.el-button-group + .el-button-group {
  margin: 0 0 0 10px;
}
.btn_grooup {
  margin-bottom: 10px;
  display: flex;
  justify-content: flex-end;
}
.el-pagination {
  margin-top: 10px;
  text-align: right;
}
</style>