supply-front/src/views/sales_policy/components/Distributor.vue

<template>
  <el-container>
    <el-header height="" class="pdt">
      <el-form
        :model="ruleForm"
        ref="ruleForm"
        label-width="120px"
        size="small"
        label-position="left"
        class="demo-ruleForm"
      >
        <el-row :gutter="20">
          <el-col :xs="24" :ms="12" :lg="12">
            <el-form-item label="销售政策编号" prop="code">
              <el-input
                v-model="ruleForm.name"
                placeholder="如未填写，则系统自动生成"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :ms="12" :lg="12">
            <el-form-item label="销售政策说明" prop="title">
              <el-input
                v-model="ruleForm.title"
                placeholder="销售政策说明"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :xs="24" :ms="12" :lg="12">
            <el-form-item label="销售政策类型" prop="type">
              <el-select v-model="ruleForm.type" placeholder="请选择">
                <el-option
                  v-for="item in typeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :ms="12" :lg="12">
            <!-- <el-form-item label="部门" prop="name">
              <el-select v-model="value" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item> -->
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :xs="24" :ms="12" :lg="12">
            <el-form-item label="制单人" prop="name">
              <el-input v-model="ruleForm.name" placeholder=""></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :ms="12" :lg="12">
            <el-form-item label="制单日期" prop="name">
              <el-input v-model="ruleForm.name" placeholder=""></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item label="表头备注" prop="remark">
            <el-input
              v-model="ruleForm.remark"
              placeholder="新风机变频挂机。按提货数量1:3开单"
            ></el-input>
          </el-form-item>
        </el-row>
      </el-form>
    </el-header>
    <!-- 按钮 -->
    <div class="btn-group clearfix">
      <div class="fl">
        <el-button
          type="primary"
          size="small"
          slot="reference"
          class="el-popover-left"
          @click="handleEdit"
          >批量编辑</el-button
        >
      </div>
    </div>
    <el-main>
      <el-table
        v-loading="listLoading"
        :data="dataList"
        element-loading-text="Loading"
        border
        @select="hanleSelectAll"
        @select-all="hanleSelectAll"
        fit
        highlight-current-row
        stripe
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column
          prop="customerNumber"
          label="经销商编码"
          width="300"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="customerName"
          label="经销商名称"
          width="300"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="limitTakeNum"
          label="最多提货套数"
          width="300"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="remark"
          label="表体备注"
          width="300"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="lastOrderTime"
          label="最近订货时间"
          width="300"
          align="center"
        >
        </el-table-column>
        <el-table-column fixed="right" label="操作" align="center" width="200">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="(type = 2), (dialogVisible = true), (id = scope.row.id)"
              >设置</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="(type = 1), (dialogVisible = true), (id = scope.row.id)"
            >
              备注</el-button
            >
            <!-- <el-button type="text" size="small">删除</el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="fr" style="margin-top: 20px">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="listTotal"
        >
        </el-pagination>
      </div>
    </el-main>

    <el-dialog
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-input
        v-if="type == 1"
        v-model="remark"
        placeholder="备注"
        size="small"
      ></el-input>
      <el-input
        v-else
        v-model="limitTakeNum"
        placeholder="最大提货数量
"
        size="small"
      ></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleInfo">确 定</el-button>
      </span>
    </el-dialog>
  </el-container>
</template>

<script>
import Pagination from "./Pagination";
import Transfer from "./Transfer";
import {
  getPolicyDetail,
  getCustomerList,
  eidtBatch,
} from "@/api/supply/sales";
import Minxin from "@/mixin";

export default {
  mixins: [Minxin],
  data() {
    return {
      dialogVisible: false,
      input: "",
      ruleForm: {},
      listLoading: false,
      remark: "",
      limitTakeNum: "",
      searchForm: {
        code: "",
        remark: "",
        title: "",
      },
      id: "",
      dataList: [],
      detail: {},
      radio: "",
      type:'',
      typeOptions: [
        {
          vlaue: "PROVISION",
          label: "配提",
        },
        {
          value: "LIMIT",
          label: "限量",
        },
      ],
    };
  },

  methods: {
    handelLeftCheck(e) {
      console.log(e);
    },
    getList() {
      this.listLoading = true;
      const params = {
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        policyId: "",
      };
      getCustomerList(params).then((res) => {
        this.dataList = res.data.records;
        this.listLoading = false;
      });
      // getPolicyDetail({ policyId: this.$route.query.id||'' }).then((res) => {
      //   this.ruleForm = res.data;
      // });
      // this.listLoading = false;
    },
    handleEdit() {
      if (this.ids.length) {
        this.type = 2;
        this.dialogVisible = true;
        return;
      }
      this.$errorMsg("请选编辑项");
    },
    handleClose(done) {
      done();
    },
    hanleDelete() {},
    handleInfo() {
      let ids = this.id ? [this.id] : this.ids;
      eidtBatch({
        policyCustomerIds: ids.join(","),
        limitTakeNum: this.limitTakeNum,
        remark: this.remark,
      }).then((res) => {
        this.$successMsg("编辑成功");
        this.dialogVisible = false;
        this.remark = ''
        this.limitTakeNum = ''
        this.getList();
      });
    },

  },
  components: {
    Transfer,
    Pagination,
  },
};
</script>

<style lang="scss" scoped>
.pdt {
  padding-top: 20px;
}

.text_right {
  text-align: right;
}
.el-select {
  width: 100%;
}
</style>