|
|
@@ -0,0 +1,451 @@
|
|
|
+<template>
|
|
|
+ <el-container :direction="vertical">
|
|
|
+ <el-header height="" class="pdt">
|
|
|
+ <h4>销售政策信息</h4>
|
|
|
+ <el-divider></el-divider>
|
|
|
+ <el-form
|
|
|
+ :model="ruleForm"
|
|
|
+ :rules="rules"
|
|
|
+ ref="ruleForm"
|
|
|
+ label-width="120px"
|
|
|
+ class="demo-ruleForm"
|
|
|
+ >
|
|
|
+ <el-row type="flex">
|
|
|
+ <el-col :span="9">
|
|
|
+ <el-form-item label="销售政策编号" prop="name">
|
|
|
+ <el-input
|
|
|
+ v-model="ruleForm.name"
|
|
|
+ placeholder="如未填写，则系统自动生成"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="15">
|
|
|
+ <el-form-item label="销售政策说明" prop="name">
|
|
|
+ <el-input
|
|
|
+ v-model="ruleForm.name"
|
|
|
+ placeholder="销售政策说明"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row type="flex">
|
|
|
+ <el-col :span="9">
|
|
|
+ <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-col :span="9">
|
|
|
+ <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>
|
|
|
+ <el-form-item label="表头备注" prop="name">
|
|
|
+ <el-input
|
|
|
+ v-model="ruleForm.name"
|
|
|
+ placeholder="新风机变频挂机。按提货数量1:3开单"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-row>
|
|
|
+ <el-row type="flex">
|
|
|
+ <el-col :span="9">
|
|
|
+ <el-form-item label="制单人" prop="name">
|
|
|
+ <el-input
|
|
|
+ v-model="ruleForm.name"
|
|
|
+ placeholder=""
|
|
|
+ ></el-input> </el-form-item
|
|
|
+ ></el-col>
|
|
|
+ <el-col :span="9">
|
|
|
+ <el-form-item label="制单日期" prop="name">
|
|
|
+ <el-input
|
|
|
+ v-model="ruleForm.name"
|
|
|
+ placeholder="如未填写，则系统自动生成"
|
|
|
+ ></el-input> </el-form-item
|
|
|
+ ></el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row type="flex">
|
|
|
+ <el-col :span="9">
|
|
|
+ <el-form-item label="生效日期" prop="name">
|
|
|
+ <el-input
|
|
|
+ v-model="ruleForm.name"
|
|
|
+ placeholder=""
|
|
|
+ ></el-input> </el-form-item
|
|
|
+ ></el-col>
|
|
|
+ <el-col :span="9">
|
|
|
+ <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="政策封面图">
|
|
|
+ <el-upload
|
|
|
+ class="avatar-uploader"
|
|
|
+ action="https://jsonplaceholder.typicode.com/posts/"
|
|
|
+ :show-file-list="false"
|
|
|
+ :on-success="handleAvatarSuccess"
|
|
|
+ :before-upload="beforeAvatarUpload"
|
|
|
+ >
|
|
|
+ <img v-if="imageUrl" :src="imageUrl" class="avatar" />
|
|
|
+ <i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
|
|
+ </el-upload>
|
|
|
+ </el-form-item>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+ </el-header>
|
|
|
+ <el-main height="">
|
|
|
+ <el-row>
|
|
|
+ <el-divider></el-divider>
|
|
|
+ <el-row type="flex" align="middle">
|
|
|
+ <el-col :span="2"> <h4>货品信息</h4> </el-col
|
|
|
+ ><el-button> 导入货品价格表</el-button>
|
|
|
+ </el-row>
|
|
|
+ <el-divider></el-divider>
|
|
|
+ </el-row>
|
|
|
+ <el-table
|
|
|
+ v-loading="listLoading"
|
|
|
+ :data="dataList"
|
|
|
+ element-loading-text="Loading"
|
|
|
+ border
|
|
|
+ fit
|
|
|
+ highlight-current-row
|
|
|
+ stripe
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ fixed
|
|
|
+ prop="num"
|
|
|
+ label="序号"
|
|
|
+ width="50"
|
|
|
+ align="center"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="name"
|
|
|
+ label="货品编码"
|
|
|
+ width="120"
|
|
|
+ align="center"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="province"
|
|
|
+ label="货品名称"
|
|
|
+ width="120"
|
|
|
+ align="center"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="city"
|
|
|
+ label="规格型号"
|
|
|
+ width="120"
|
|
|
+ align="center"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="address"
|
|
|
+ label="销售类型编码"
|
|
|
+ width="500"
|
|
|
+ align="center"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="zip" label="销售类型" width="120" align="center">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="zip" label="单价" width="120" align="center">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="zip" label="返利比例" width="120" align="center">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="zip" label="表体备注" width="120" align="center">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column fixed="right" label="操作" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button type="text" size="small">删除</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <Pagination />
|
|
|
+ </el-main>
|
|
|
+ <el-footer height="" class="footer">
|
|
|
+ <el-row>
|
|
|
+ <el-divider></el-divider>
|
|
|
+ <el-row type="flex" align="middle">
|
|
|
+ <el-col :span="2">
|
|
|
+ <h4>货品信息</h4>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-divider></el-divider>
|
|
|
+ </el-row>
|
|
|
+ <el-row class="radio">
|
|
|
+ <el-radio v-model="radio" label="1">全部经销商</el-radio>
|
|
|
+ <el-radio v-model="radio" label="2">品类</el-radio>
|
|
|
+ <el-radio v-model="radio" label="1">地区</el-radio>
|
|
|
+ <el-radio v-model="radio" label="2">指定</el-radio>
|
|
|
+ </el-row>
|
|
|
+ <!-- justify="center" -->
|
|
|
+ <el-row type="flex">
|
|
|
+ <el-col>
|
|
|
+ <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-col>
|
|
|
+ <el-col><el-button>确定</el-button></el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row type="flex" align="moddle" class="transfer">
|
|
|
+ <e-col class="left_box">
|
|
|
+ <h4 class="transfer_title">可选经销商</h4>
|
|
|
+ <el-checkbox-group
|
|
|
+ v-model="leftData"
|
|
|
+ class="left_box_flex"
|
|
|
+ @change="handelLeftCheck"
|
|
|
+ >
|
|
|
+ <el-checkbox label="复选框 A"></el-checkbox>
|
|
|
+ <el-checkbox label="复选框 B"></el-checkbox>
|
|
|
+ <el-checkbox label="复选框 C"></el-checkbox>
|
|
|
+ </el-checkbox-group>
|
|
|
+ </e-col>
|
|
|
+ <e-col class="middle_box">
|
|
|
+ <el-row>
|
|
|
+ <el-col>
|
|
|
+ <el-button :disabled="isDisabled">全部添加</el-button></el-col
|
|
|
+ >
|
|
|
+ <el-col> <el-button :disabled="isDisabled">增加</el-button></el-col>
|
|
|
+ <el-col> <el-button :disabled="isDisabled">删除</el-button></el-col>
|
|
|
+ <el-col>
|
|
|
+ <el-button :disabled="isDisabled">全部删除</el-button></el-col
|
|
|
+ >
|
|
|
+ </el-row>
|
|
|
+ </e-col>
|
|
|
+ <e-col class="right_box">
|
|
|
+ <h4 class="transfer_title">已选经销商</h4>
|
|
|
+ <el-checkbox-group v-model="rightData" class="right_box_flex">
|
|
|
+ <el-checkbox label="复选框 A"></el-checkbox>
|
|
|
+ <el-checkbox label="复选框 B"></el-checkbox>
|
|
|
+ <el-checkbox label="复选框 C"></el-checkbox>
|
|
|
+ </el-checkbox-group>
|
|
|
+ </e-col>
|
|
|
+ </el-row>
|
|
|
+ </el-footer>
|
|
|
+ </el-container>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import Pagination from "@/components/Sales/Pagination";
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ const generateData = (_) => {
|
|
|
+ const data = [];
|
|
|
+ for (let i = 1; i <= 15; i++) {
|
|
|
+ data.push({
|
|
|
+ value: i,
|
|
|
+ desc: `备选项 ${i}`,
|
|
|
+ disabled: i % 4 === 0,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ return data;
|
|
|
+ };
|
|
|
+ return {
|
|
|
+ input: "",
|
|
|
+
|
|
|
+ transferData: generateData(),
|
|
|
+ transfer: [],
|
|
|
+ ruleForm: {
|
|
|
+ name: "",
|
|
|
+ },
|
|
|
+ listLoading: false,
|
|
|
+ rules: {
|
|
|
+ name: [
|
|
|
+ { required: true, message: "", trigger: "click" },
|
|
|
+ { min: 3, max: 5, message: "", trigger: "click" },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ options: [
|
|
|
+ {
|
|
|
+ value: "选项1",
|
|
|
+ label: "黄金糕",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: "选项2",
|
|
|
+ label: "双皮奶",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: "选项3",
|
|
|
+ label: "蚵仔煎",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: "选项4",
|
|
|
+ label: "龙须面",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: "选项5",
|
|
|
+ label: "北京烤鸭",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ value: "",
|
|
|
+ dataList: [
|
|
|
+ {
|
|
|
+ num: "2",
|
|
|
+ name: "王小虎",
|
|
|
+ province: "上海",
|
|
|
+ city: "普陀区",
|
|
|
+ address: "上海市普陀区金沙江路 1518 弄",
|
|
|
+ zip: 200333,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ num: "2",
|
|
|
+ name: "王小虎",
|
|
|
+ province: "上海",
|
|
|
+ city: "普陀区",
|
|
|
+ address: "上海市普陀区金沙江路 1518 弄",
|
|
|
+ zip: 200333,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ num: "2",
|
|
|
+ name: "王小虎",
|
|
|
+ province: "上海",
|
|
|
+ city: "普陀区",
|
|
|
+ address: "上海市普陀区金沙江路 1518 弄",
|
|
|
+ zip: 200333,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ num: "2",
|
|
|
+ name: "王小虎",
|
|
|
+ province: "上海",
|
|
|
+ city: "普陀区",
|
|
|
+ address: "上海市普陀区金沙江路 1518 弄",
|
|
|
+ zip: 200333,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ num: "2",
|
|
|
+ name: "王小虎",
|
|
|
+ province: "上海",
|
|
|
+ city: "普陀区",
|
|
|
+ address: "上海市普陀区金沙江路 1518 弄",
|
|
|
+ zip: 200333,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ num: "2",
|
|
|
+ name: "王小虎",
|
|
|
+ province: "上海",
|
|
|
+ city: "普陀区",
|
|
|
+ address: "上海市普陀区金沙江路 1518 弄",
|
|
|
+ zip: 200333,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ num: "2",
|
|
|
+ name: "王小虎",
|
|
|
+ province: "上海",
|
|
|
+ city: "普陀区",
|
|
|
+ address: "上海市普陀区金沙江路 1518 弄",
|
|
|
+ zip: 200333,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ radio: "",
|
|
|
+ leftData: [],
|
|
|
+ rightData: [],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ isDisabled() {
|
|
|
+ return !(this.leftData.length || this.rightData.length)
|
|
|
+ },
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handelLeftCheck(e) {
|
|
|
+ console.log(e);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ Pagination,
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+h4 {
|
|
|
+ margin: 0;
|
|
|
+}
|
|
|
+.pdt {
|
|
|
+ padding-top: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.radio {
|
|
|
+ padding: 20px 0;
|
|
|
+}
|
|
|
+.el-divider--horizontal {
|
|
|
+ margin: 20px 0;
|
|
|
+}
|
|
|
+.el-container .el-divider--horizontal {
|
|
|
+ margin: 10px;
|
|
|
+}
|
|
|
+::v-deep .el-form-item__label {
|
|
|
+ // text-align: left;
|
|
|
+}
|
|
|
+.el-select {
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+// 穿梭框
|
|
|
+.transfer {
|
|
|
+ margin: 20px 0;
|
|
|
+ &_title {
|
|
|
+ margin: 20px 20px 0 20px;
|
|
|
+ }
|
|
|
+ .left_box {
|
|
|
+ width: 430px;
|
|
|
+ height: 450px;
|
|
|
+ border: 1px solid #eee;
|
|
|
+ &_flex {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ margin: 20px;
|
|
|
+ .el-checkbox {
|
|
|
+ padding: 10px 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right_box {
|
|
|
+ width: 430px;
|
|
|
+ height: 450px;
|
|
|
+ border: 1px solid #eee;
|
|
|
+ &_flex {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ margin: 20px;
|
|
|
+ .el-checkbox {
|
|
|
+ padding: 10px 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .middle_box {
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .el-row .el-col {
|
|
|
+ margin: 20px 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+.footer {
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
+</style>
|
howie