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

<template>
    <div>
        <el-button type="primary" size="mini" @click="openDialog">增行</el-button>
        <el-dialog title="物料信息查询" :visible.sync="open" :before-close="useClose">
            <el-form size="mini" label-width="120px" >
                <el-row :gutter="10">
                    <el-col :span="1.5">
                        <el-form-item label="物料编码">
                        <el-input
                            v-model="queryParams.code"
                            clearable
                            style="width: 200px"
                        />
                        </el-form-item>
                    </el-col>
                    <el-col :span="1.5">
                        <el-form-item label="物料名称">
                        <el-input
                            v-model="queryParams.name"
                            clearable
                            style="width: 200px"
                        />
                        </el-form-item>
                    </el-col>
                    <el-col :span="1.5">
                        <el-form-item>
                        <el-button type="primary" icon="el-icon-search" plain @click="useSearch">搜索</el-button>
                        <el-button icon="el-icon-refresh" plain @click="useReset">重置</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <el-table :data="tableData" size="mini" @row-dblclick="useDoubleClick" @selection-change="useSelectChange" v-loading="loading" height="450px">
                <el-table-column type="selection" width="55"> </el-table-column>
                <el-table-column show-overflow-tooltip label="编码" align="center" width="150" prop="code"/>
                <el-table-column show-overflow-tooltip label="名称" align="center" width="200" prop="name"/>
                <el-table-column show-overflow-tooltip label="物料分类" align="center" width="150" prop="fourClass" />
                <el-table-column show-overflow-tooltip label="单位" align="center" width="100" prop="unitIdName"/>
                <el-table-column show-overflow-tooltip label="规格" align="center" width="200" prop="specification" />
            </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 class="btn_group">
                <el-col :span="1.5" style="margin: 0 10px;">
                    <el-button type="primary" size="mini" plain @click="useConfirm">确认</el-button>
                </el-col>
            </div>
        </el-card>
        </el-dialog>
    </div>
</template>

<script>
import materialApi from "@/api/material/basic";
import { saveItems } from "@/api/business/spd/fillin/dailysale_quantity_assess_item";
export default {
  name: "dailysaleQuantityAssessDetailAddmaterial",
  props: ["form"],
  data() {
    return {
      loading: false,
      //是否打开弹窗
      open:false,
      //搜索框参数
      queryParams:{
        code: null,
        name: null,
      },
      page:{
        pageNum:1,
        pageSize:10,
      },
      //总条数
      total: 0,
      //列表数据
      tableData:[],
      //选择的数据
      selectionData:[],
    };
  },
  methods: {
    //打开弹窗
    openDialog(){
      this.open = true;
      this.getList();
    },
    //关闭弹窗
    useClose(done){
      this.selectionData = [];
      this.queryParams = {
          code: null,
          name: null,
      }
      this.page = {
          pageNum:1,
          pageSize:10,
      }
      done();
    },
    //获取列表数据
    async getList() {
      try {
        this.loading = true;
        const { code, data } = await materialApi.materialList(this.queryParams, this.page);
        if (code === 200) {
          this.tableData = data.tableBody.rows;
          this.total = data.tableBody.total;
        }
      } catch (err) {
        // catch
        console.error(err);
      } finally {
        // finally
        this.loading = false;
      }
    },
    //多选
    useSelectChange(selection){
        this.selectionData = selection;
    },
    //确认多选
    async useConfirm(){
      if(this.selectionData.length < 1){
        this.$modal.msgError("未选择数据！");
        return;
      }
      const arr = [];
      for(let i in this.selectionData){
          arr.push({
              dailysaleQuantityAssessId:this.form.id,
              oneClassName:this.selectionData[i].oneClass,
              twoClassName:this.selectionData[i].twoClass,
              material:this.selectionData[i].id,
              materialCode:this.selectionData[i].code,
              materialName:this.selectionData[i].name,
              unitName:this.selectionData[i].unitIdName,
              price:this.selectionData[i].price,
          });
      }
      let res = await saveItems(arr);
      if(res.code == '200'){
        this.$modal.msgSuccess("添加成功");
        this.$emit("useReset");
        this.open = false;
      }else{
        this.$modal.msgError("保存失败，请联系管理员！");
      }
    },
    //双击选择
    async useDoubleClick(row){
        const arr = [];
        arr.push({
            dailysaleQuantityAssessId:this.form.id,
            oneClassName:row.oneClass,
            twoClassName:row.twoClass,
            material:row.id,
            materialCode:row.code,
            materialName:row.name,
            unitName:row.unitIdName,
            price:row.price,
        });
        let res = await saveItems(arr);
        if(res.code == '200'){
          this.$modal.msgSuccess("添加成功");
          this.$emit("useReset");
          this.open = false;
        }else{
          this.$modal.msgError("保存失败，请联系管理员！");
        }
    },
    //搜索
    useSearch(){
      this.getList();
    },
    //重置
    useReset(){
      this.queryParams = {
        code: null,
        name: null,
      }
      this.page = {
        pageNum:1,
        pageSize:10,
      }
      this.getList();
    },
    //改变一页显示条数
    useChangePageSize(val){
      this.page.pageSize = val
      this.getList()
    },
    //翻页
    useCurrentChange(val){
      this.page.pageNum = val
      this.getList()
    },
  },
  created() {},
  mounted() {},
  destroyed() {},
};
</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>