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

<template>
  <el-container>
    <el-header height="" class="pdt">
      <el-form
        :model="details"
        ref="details"
        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
                disabled
                v-model="details.code"
                placeholder="如未填写，则系统自动生成"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :ms="12" :lg="12">
            <el-form-item label="销售政策说明" prop="title">
              <el-input
                disabled
                v-model="details.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
                disabled
                v-model="typeOptions[details.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-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :xs="24" :ms="12" :lg="12">
            <el-form-item label="制单人" prop="createBy">
              <el-input
                disabled
                v-model="details.createBy"
                placeholder=""
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :ms="12" :lg="12">
            <el-form-item label="制单日期" prop="startTime">
              <el-input
                disabled
                v-model="details.startTime"
                placeholder=""
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item label="表头备注" prop="remark">
            <el-input
              disabled
              v-model="details.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"
        >
          <!--  v-if="!$store.getters.customerId"-->
          <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/policy_list";
import Minxin from "@/mixin";

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

  methods: {
    handelLeftCheck(e) {
      console.log(e);
    },
    getList() {
      if (this.cid) {
        this.listLoading = true;
        const params = {
          pageNum: this.currentPage,
          pageSize: this.pageSize,
          policyId: this.cid,
        };
        getCustomerList(params).then((res) => {
          this.dataList = res.data.records;
          this.listLoading = false;
        });
        getPolicyDetail({ policyId: this.cid }).then((res) => {
          this.details = 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 && typeof this.id != Array ? [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>