组织管理-零售公司功能开发。

src/pages/organization/OrganizationCompany.vue

@@ -1,10 +1,383 @@
 <template>
-    <div>company</div>
+    <div>
+        <Row class="search-row">
+            <i-col span="24" class="search-col">
+                <Row class="row-style">
+                    <i-input placeholder="搜索零售公司编码/名称" class="left-15 search-select" @on-enter="onEnterLister" v-model="searchContent"/>
+                    <span class="search-span">大区</span>
+                    <Select filterable placeholder="请选择大区" v-model="regionId" @on-change="regionSelect" class="search-select">
+                        <Option v-for="item in regionList" :value="item.id" :key="item.id">{{ item.name }}</Option>
+                    </Select>
+                    <Button type="primary" @click="onClickGetDataLister" class="search-btn">查询</Button>
+                    <div class="search-div-btn">
+                        <Button type="primary" @click="open(0,null)">添加</Button>
+                    </div>
+                </Row>
+            </i-col>
+        </Row>
+
+
+        <Table :loading="loading" ref="table" :columns="columns1" :data="data1" class="table-margin-top"
+               size="small">
+            <template slot-scope="{row}" slot="action">
+                <Button
+                        ghost
+                        type="primary"
+                        size="small"
+                        style="border: 0px;color:#2074E2"
+                        @click="open(1,row)"
+                >修改
+                </Button>
+                <Button
+                        ghost
+                        type="error"
+                        size="small"
+                        style="border: 0px"
+                        @click="remove(row)"
+                >删除</Button>
+            </template>
+
+        </Table>
+        <Page :total="totalSize" :current="pageNum" :page-size="pageSize" show-elevator show-total
+              placement="top" @on-change="handlePage" class-name="ks-page"></Page>
+
+        <!-- 添加/修改 零售公司 -->
+        <Modal v-model="isShow" :footer-hide="true">
+            <div slot="header">{{type === 0 ? '添加' : '修改'}}大区</div>
+            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
+                <FormItem label="公司简称" prop="name">
+                    <i-input type="text" v-model="formValidate.name" placeholder="请输入零售公司简称"></i-input>
+                </FormItem>
+                <FormItem label="公司编码" prop="code">
+                    <i-input v-model="formValidate.code"
+                            placeholder="请输入零售公司编码">
+                    </i-input>
+                </FormItem>
+                <FormItem label="公司全称" prop="detailName">
+                    <i-input
+                            v-model="formValidate.detailName"
+                            placeholder="请输入零售公司全称"
+
+                    ></i-input>
+                </FormItem>
+                <FormItem label="所属大区" prop="parentId">
+                    <Select v-model="formValidate.parentId"
+                            placeholder="选择大区">
+                        <Option v-for="item in regionList" :value="item.id" :key="item.id">{{ item.name }}</Option>
+                    </Select>
+                </FormItem>
+                <FormItem style="text-align: left;">
+                    <Button :loading="btnLoading" type="primary" @click="handleSubmit(formValidate)">{{type === 0 ? '保存' : '修改'}}</Button>
+                    <Button @click="handleReset('formValidate')" style="margin-left: 10px">取消</Button>
+                </FormItem>
+            </Form>
+        </Modal>
+
+        <Modal v-model="isModelShow" title="删除提示" align="center">
+            <p style="margin-top: 20px;margin-bottom: 20px">
+                确定要删除此公司吗？删除后不可恢复
+            </p>
+            <div slot="footer"
+                 style="text-align: center;margin-bottom: 10px;margin-top: 10px">
+                <Button style="width: 100px;" @click="isModelShow = false">取消</Button>
+                <Button :loading="btnLoading" type="error" style="width: 100px;margin-left: 20px" @click="deleteRegion">确认</Button>
+            </div>
+        </Modal>
+    </div>
 </template>
 
 <script>
+    import service from '../../services/organization/OrganizationService'
+    import zeroExtend from "../../services/customer/zeroExtend";
+
     export default {
-        name: "OrganizationCompany"
+        name: "OrganizationCompany",
+        data() {
+            return {
+                userId: "",
+                loading: false,
+                btnLoading: false,// 添加修改加载中
+                columns1: [
+                    {
+                        title: '序号',
+                        key: 'index'
+                    },
+                    {
+                        title: '零售公司',
+                        key: 'name'
+                    },
+                    {
+                        title: '编码',
+                        key: 'code'
+                    },
+                    {
+                        title: '所属大区',
+                        key: 'parentName'
+                    },
+                    {
+                        title: '操作',
+                        slot: 'action',
+                        width: '200px'
+                    }
+                ],
+                data1: [
+                ],
+                //分页内容
+                totalSize: 0,
+                pageNum: 1,
+                pageSize: 10,
+                isShow: false,
+                type: 0, // 0添加 1修改
+                formValidate: {
+                    name: '',
+                    code: '',
+                    detailName: '',
+                    parentId: null
+                },
+                ruleValidate: {
+                    name: [
+                        {required: true, message: '公司简称不能为空', trigger: 'blur'}
+                    ],
+                    code: [
+                        {required: true, message: '公司编码不能为空', trigger: 'blur'}
+                    ],
+                    detailName: [
+                        {required: true, message: '公司全称不能为空', trigger: 'blur'}
+                    ],
+                    parentId: [
+                        { required: true, type: 'number', message: '请选择大区', trigger: 'change' }
+                    ]
+                },
+                isModelShow: false,
+                currentId: 0, // 当前记录ID
+                selectedCompany: null,// 大区下拉选择
+                regionList: [], // 大区数据
+                searchContent: '', // 搜索内容
+                regionId: 0
+            }
+        },
+        created() {
+            this.userId = JSON.parse(sessionStorage.getItem("loginInfo")).userId;
+            this.getSelectList();
+            this.getData();
+        },
+        methods: {
+            remove: function (row) {
+                this.isModelShow = true;
+                this.currentId = row.id;
+            },
+            open: function (type, item) {
+                this.isShow = true;
+                this.type = type;
+                if(type === 0){
+                    // 添加
+                    this.formValidate =  {
+                        name: "",
+                        code: '',
+                        detailName: '',
+                        parentId: null
+                    }
+
+                }else{
+                    this.formValidate =  {
+                        id: item.id,
+                        name: item.name,
+                        code: item.code,
+                        detailName: item.detailName,
+                        parentId: item.parentId
+                    }
+                }
+
+            },
+            show: function (index) {
+                this.isShow = true;
+            },
+            hide: function () {
+                this.isShow = false;
+            },
+            handleSubmit(value) {
+                if (value) {
+                    if(!value.parentId){
+                        this.$Message.info('请输入表单内容');
+                        return;
+                    }
+                    if(this.type === 0){
+                        // 添加
+                        this.addCompany(value);
+                    }else{
+                        // 调用修改接口
+                        this.modifyCompany(value);
+                    }
+                } else {
+                    this.$Message.info('请输入表单内容');
+                }
+            },
+            handleReset(name) {
+                this.$refs[name].resetFields();
+                this.isShow = false;
+            },
+            /**
+             * 切页处理
+             */
+            handlePage: function (value) {
+                this.pageNum = value;
+                this.getData();
+            },
+            deleteRegion: function () {
+                // 删除大区
+                let that = this;
+                if(that.currentId === 0){
+                    return;
+                }
+                that.btnLoading = true;
+                let request = {
+                    id: that.currentId
+                };
+                service.postOrganizationRemoveId(request, function (res) {
+                    that.btnLoading = false;
+                    let data = res.data;
+                    if(data.code === "0000"){
+                        that.$Message.success("删除成功");
+                        that.isModelShow = false;
+                        that.getData();
+                    }else{
+                        that.$Message.error("删除失败");
+                    }
+                }, function () {
+                    that.btnLoading = false;
+                });
+
+            },
+            /**
+             * 查询列表
+             */
+            getData: function () {
+                let that = this;
+                that.loading = true;
+
+                let request = {
+                    userId: that.userId,
+                    searchVal: that.searchContent,
+                    parentId: that.regionId,
+                    pageNum: that.pageNum,
+                    pageSize: that.pageSize
+                };
+                service.postOrganizationCompanyList(request, function (res) {
+                    that.loading = false;
+                    let data = res.data;
+
+                    that.data1 = [];
+                    for (let i=0;i<data.results.records.length;i++) {
+                        let item = data.results.records[i];
+                        item.index = i+ that.pageNum * that.pageSize;
+                        that.data1.push(item);
+                    }
+
+                    that.totalSize = data.results.total;
+                }, function () {
+                    that.loading = false;
+                });
+            },
+            /**
+             * 添加零售公司
+             */
+            addCompany: function (val) {
+                let that = this;
+                let request = {
+                    name: val.name,
+                    code: val.code,
+                    detailName: val.detailName,
+                    parentId: val.parentId
+                };
+                that.btnLoading = true;
+                service.postOrganizationCompanyAdd(request, function (res) {
+                    that.btnLoading = false;
+                    let data = res.data;
+                    if(data.code === "0000"){
+                        that.$Message.success("添加成功");
+                        that.hide();
+                        that.getData();
+                    }else{
+                        that.$Message.error("添加失败");
+                    }
+                }, function () {
+                    that.btnLoading = false;
+                });
+            },
+            /**
+             * 修改零售公司
+             */
+            modifyCompany: function (val) {
+                let that = this;
+                let request = {
+                    id: val.id,
+                    name: val.name,
+                    code: val.code,
+                    detailName: val.detailName,
+                    parentId: val.parentId
+                };
+                service.postOrganizationRegionModify(request, function (res) {
+                    that.btnLoading = false;
+                    let data = res.data;
+                    if(data.code === "0000"){
+                        that.$Message.success("修改成功");
+                        that.hide();
+                        that.getData();
+                    }else{
+                        that.$Message.error("修改失败");
+                    }
+                }, function () {
+                    that.btnLoading = false;
+                });
+            },
+            /**
+             * 回车事件
+             */
+            onEnterLister: function () {
+                this.pageNum = 1;
+                this.getData();
+            },
+            /**
+             * 大区选择改变事件
+             */
+            regionSelect: function(){
+                let regionId = this.regionId;
+                if(regionId === 0){
+                    this.companyList = this.organizationalList.filter(item => item.level === 2);
+                    this.customerList = this.organizationalList.filter(item => item.level === 3);
+                }else{
+                    this.companyList = this.organizationalList.filter(item => item.parentId === regionId && item.level === 2);
+                    let companyIds = this.companyList.map(item => item.id);
+                    this.customerList = this.organizationalList.filter(item => companyIds.indexOf(item.parentId) !== -1 && item.level === 3);
+                }
+            },
+            /**基础数据：区域list、零售公司list、客户list*/
+            getSelectList:function(){
+                let that = this;
+                let request = {
+                    userId: this.userId
+                };
+                zeroExtend.getSelectListRequest(request,function (data) {
+                    if(data.data.code !== "0000"){
+                        that.$Message.error("系统异常");
+                    }
+                    data = data.data.results;
+                    if(data){
+                        that.organizationalList = data;
+                        that.regionList = that.organizationalList.filter(item => item.level === 1);
+                    }
+                    //插入全部选项
+                    // that.insertAllOption();
+                });
+            },
+            /**
+             * 点击查询按钮事件
+             */
+            onClickGetDataLister: function () {
+                this.pageNum = 1;
+                this.getData();
+            }
+        }
     }
 </script>
 

src/pages/organization/OrganizationRegion.vue

@@ -203,12 +203,11 @@
                     that.loading = false;
                     let data = res.data;
 
-                    if(that.pageNum === 1){
-                        that.data1 = [];
-                    }
+                    that.data1 = [];
+
                     for (let i=0;i<data.results.records.length;i++) {
                         let item = data.results.records[i];
-                        item.index = i+that.pageNum;
+                        item.index = i + that.pageNum * that.pageSize;
                         that.data1.push(item);
                     }
 

src/services/organization/OrganizationService.js

@@ -8,8 +8,9 @@ import http from '../CommonHttp'
 
 /**
  * 查询大区列表
- * @param params
- * @param call
+ * @param params 参数
+ * @param call 成功回调
+ * @param errorCallback 错误回调
  * @returns {Promise<any>}
  */
 export function getOrganizationRegionList(params, call, errorCallback) {
@@ -17,19 +18,21 @@ export function getOrganizationRegionList(params, call, errorCallback) {
 }
 
 /**
- * 修改大区
- * @param params
- * @param call
+ * 修改组织 大区 公司 客户
+ * @param params 参数
+ * @param call 成功回调
+ * @param errorCallback 错误回调
  * @returns {Promise<any>}
  */
 export function postOrganizationRegionModify(params, call, errorCallback) {
-    return http.post('/organization/region/modify', params).then(call).catch(errorCallback)
+    return http.post('/organization/modify', params).then(call).catch(errorCallback)
 }
 
 /**
- * 添加大区
- * @param params
- * @param call
+ * 添加组织 大区
+ * @param params 参数
+ * @param call 成功回调
+ * @param errorCallback 错误回调
  * @returns {Promise<any>}
  */
 export function postOrganizationRegionAdd(params, call, errorCallback) {
@@ -38,17 +41,44 @@ export function postOrganizationRegionAdd(params, call, errorCallback) {
 
 /**
  * 删除
- * @param params
- * @param call
+ * @param params 参数
+ * @param call 成功回调
+ * @param errorCallback 错误回调
  * @returns {Promise<any>}
  */
 export function postOrganizationRemoveId(params, call, errorCallback) {
     return http.post('/organization/remove/id', params).then(call).catch(errorCallback)
 }
 
+/**
+ * 查询零售公司列表
+ * @param params 参数
+ * @param call 成功回调
+ * @param errorCallback 错误回调
+ * @returns {Promise<any>}
+ */
+export function postOrganizationCompanyList(params, call, errorCallback) {
+    return http.post('/organization/company/list', params).then(call).catch(errorCallback)
+}
+
+/**
+ * 添加组织 公司
+ * @param params 参数
+ * @param call 成功回调
+ * @param errorCallback 错误回调
+ * @returns {Promise<any>}
+ */
+export function postOrganizationCompanyAdd(params, call, errorCallback) {
+    return http.post('/organization/company/add', params).then(call).catch(errorCallback)
+}
+
+
+
 export default {
     getOrganizationRegionList,
     postOrganizationRegionModify,
     postOrganizationRegionAdd,
-    postOrganizationRemoveId
+    postOrganizationRemoveId,
+    postOrganizationCompanyList,
+    postOrganizationCompanyAdd
 }