商机管理和回款管理

src/api/modules/business.js

@@ -0,0 +1,26 @@
+import request from '@/utils/request'
+import { fileDown } from '../../utils/file'
+import md5 from 'js-md5'
+/*
+* 商机
+*/
+export default {
+  list(params) {
+    return request.get(`businessOpportunity`, { params: params })
+  },
+  detail(params) {
+    return request.get(`businessOpportunity/${params}`)
+  },
+  simpleAll() {
+    return request.get(`businessOpportunity/simpleAll`)
+  },
+  add(params) {
+    return request.post(`businessOpportunity`, params)
+  },
+  edit(params) {
+    return request.put(`businessOpportunity`, params)
+  },
+   delete(params) {
+     return request.delete(`businessOpportunity/${params}`)
+   },
+}

src/api/modules/payment.js

@@ -0,0 +1,29 @@
+import request from '@/utils/request'
+import { fileDown } from '../../utils/file'
+import md5 from 'js-md5'
+/*
+* 回款
+*/
+export default {
+  list(params) {
+    return request.get(`paymentCollection`, { params: params })
+  },
+  detail(params) {
+    return request.get(`paymentCollection/${params}`)
+  },
+  simpleAll() {
+    return request.get(`paymentCollection/simpleAll`)
+  },
+  add(params) {
+    return request.post(`paymentCollection`, params)
+  },
+  edit(params) {
+    return request.put(`paymentCollection`, params)
+  },
+   delete(params) {
+     return request.delete(`paymentCollection/${params}`)
+   },
+  itemPayment(params) {
+    return request.get(`paymentCollection/item`, { params: params })
+  },
+}

src/router/urlMap.js

@@ -36,6 +36,12 @@ import _view_index_logs from '@/views/log/logIndex'
 import _view_index_rate from '@/views/item/itemIndex'
 import _views_market_customer from '@/views/market/customer/list'
 import _views_market_customer_add from '@/views/market/customer/detail'
+import _views_market_customer_detail from '@/views/market/customer/detail'
+import _views_market_business from '@/views/market/business/list'
+import _views_market_business_detail from '@/views/market/business/detail'
+import _views_market_business_add from '@/views/market/business/detail'
+import _views_market_payment from '@/views/market/payment/list'
+import _views_market_payment_list from '@/views/market/payment/detailList'
 
 export default {
   _views_set_menu,
@@ -60,5 +66,11 @@ export default {
   _view_index_logs,
   _view_index_rate,
   _views_market_customer,
-  _views_market_customer_add
+  _views_market_customer_add,
+  _views_market_customer_detail,
+  _views_market_business,
+  _views_market_business_detail,
+  _views_market_business_add,
+  _views_market_payment,
+  _views_market_payment_list
 }

src/views/market/business/detail.vue

@@ -0,0 +1,261 @@
+<template>
+  <div class="app-container">
+    <div class="title-container">
+      <breadcrumb id="breadcrumb-container" class="breadcrumb-container"/>
+    </div>
+    <y-detail-page-layout @save="handleCreate" :edit-status="true" v-loading="vLoading" element-loading-text="处理中。。。">
+      <div style="padding-top: 30px;">
+        <el-tabs v-model="activeName">
+          <el-tab-pane label="商机详情" name="first">
+            <el-form ref="postForm" :model="postForm" class="form-container" style="padding-left: 500px">
+              <div>
+                <div class="postInfo-container">
+                  <el-row>
+                    <el-col :xs="24" :sm="12" :lg="10" :span="6">
+                      <el-form-item
+                        label="商机名称："
+                        prop="opportunityName"
+                        label-width="180px"
+                        class="postInfo-container-item"
+                        :rules="{required: true, message: '请填写商机名称', trigger: 'blur'}"
+                      >
+                        <el-input v-model="postForm.opportunityName" class="filter-item"/>
+                      </el-form-item>
+                    </el-col>
+                  </el-row>
+                </div>
+              </div>
+              <div>
+                <div class="postInfo-container">
+                  <el-row>
+                    <el-col :xs="24" :sm="12" :lg="10" :span="6">
+                      <el-form-item
+                        label="客户名称："
+                        prop="customerId"
+                        label-width="180px"
+                        class="postInfo-container-item"
+                        :rules="{required: true, message: '请填选择客户名称', trigger: 'blur'}"
+                      >
+                        <el-select
+                          v-model="postForm.customerId"
+                          placeholder=""
+                          clearable
+                          filterable
+                          class="filter-item"
+                          style=" width: 100%"
+
+                        >
+                          <el-option
+                            v-for="item in customers"
+                            :key="item.id"
+                            :label="item.name"
+                            :value="item.id"
+                          />
+                        </el-select>
+                      </el-form-item>
+                    </el-col>
+                  </el-row>
+                </div>
+              </div>
+              <div>
+                <div>
+                  <div class="postInfo-container">
+                    <el-row>
+                      <el-col :xs="24" :sm="12" :lg="10" :span="6">
+                        <el-form-item
+                          label="预计金额："
+                          prop="estimateAmount"
+                          label-width="180px"
+                          class="postInfo-container-item"
+                        >
+                          <el-input v-model="postForm.estimateAmount" class="filter-item"/>
+                        </el-form-item>
+                      </el-col>
+                    </el-row>
+                  </div>
+                </div>
+                <div>
+                  <div class="postInfo-container">
+                    <el-row>
+                      <el-col :xs="24" :sm="12" :lg="10" :span="6">
+                        <el-form-item
+                          label="预计开展日期："
+                          prop="estimateDate"
+                          :rules="{required: true, message: '请选择日期', trigger: 'blur'}"
+                          label-width="180px"
+                          class="postInfo-container-item"
+                        >
+                          <el-date-picker
+                            v-model="postForm.estimateDate"
+                            type="date"
+                            value-format="yyyy-MM-dd"
+                            style="width: 100%"
+                            placeholder="选择日期"
+                          />
+                        </el-form-item>
+                      </el-col>
+                    </el-row>
+                  </div>
+                </div>
+                <div>
+                  <div class="postInfo-container">
+                    <el-row>
+                      <el-col :xs="24" :sm="12" :lg="10" :span="6">
+                        <el-form-item label="状态：" label-width="180px" class="postInfo-container-item">
+                          <el-select
+                            v-model="postForm.state"
+                            placeholder=""
+                            filterable
+                            class="filter-item"
+                            style="width: 100%"
+                          >
+                            <el-option key="0" label="跟进中" value="跟进中"/>
+                            <el-option key="1" label="签约" value="签约"/>
+                            <el-option key="2" label="终止" value="终止"/>
+                          </el-select>
+                        </el-form-item>
+                      </el-col>
+                    </el-row>
+                  </div>
+                </div>
+                <div>
+                  <div class="postInfo-container">
+                    <el-row>
+                      <el-col :xs="24" :sm="12" :lg="10" :span="6">
+                        <el-form-item
+                          label="终止原因："
+                          prop="offReason"
+                          label-width="180px"
+                          class="postInfo-container-item"
+                        >
+                          <el-input v-model="postForm.offReason" class="filter-item"/>
+                        </el-form-item>
+                      </el-col>
+                    </el-row>
+                  </div>
+                </div>
+                <div>
+                  <div class="postInfo-container">
+                    <el-row>
+                      <el-col :xs="24" :sm="12" :lg="10" :span="6">
+                        <el-form-item
+                          label="备注："
+                          prop="remark"
+                          label-width="180px"
+                          class="postInfo-container-item"
+                        >
+                          <el-input type="textarea" v-model="postForm.remark" class="filter-item" placeholder="200字符"/>
+                        </el-form-item>
+                      </el-col>
+                    </el-row>
+                  </div>
+                </div>
+              </div>
+            </el-form>
+          </el-tab-pane>
+        </el-tabs>
+      </div>
+    </y-detail-page-layout>
+  </div>
+</template>
+<script>
+  import Breadcrumb from '@/components/Breadcrumb'
+  import YDetailPageLayout from '@/components/YDetailPageLayout'
+
+  export default {
+    name: 'businessDetail',
+    components: {
+      Breadcrumb,
+      YDetailPageLayout
+    },
+    data() {
+      return {
+        type: 'detail',
+        postForm: {
+          state:'跟进中'
+        },
+        businessId : this.$route.query.id,
+        activeName: 'first',
+        vLoading: false,
+        listQuery:{},
+        customers:[]
+      }
+    },
+    created() {
+      this.getCustomer();
+      this.getDetail();
+    },
+    methods: {
+      getDetail() {
+        if (this.businessId) {
+          this.$api.business.detail(this.businessId).then(res => {
+            this.postForm = res.data;
+          });
+        }
+      },
+      getCustomer(){
+        const that = this;
+        that.$api.customer.simpleAll().then(data => {
+          if (data.code === 200) {
+            that.customers = data.data
+          } else {
+            this.$message({
+              type: 'error',
+              message: data.msg
+            })
+          }
+        })
+      },
+      handleCreate() {
+        this.$refs.postForm.validate(valid => {
+          if (valid) {
+            if (this.businessId) {
+              this.$api.business.edit(Object.assign({}, this.postForm, {
+              })).then(res => {
+                if (res.code === 200) {
+                  this.$notify({
+                    title: '成功',
+                    message: '保存成功',
+                    type: 'success',
+                    duration: 2000
+                  });
+                  const back = this.$route.query.back;
+                  if (back) {
+                    this.$router.push(back)
+                  }
+                  this.initData();
+                  this.vLoading = false
+                }
+              }).catch(() => {
+                this.vLoading = false
+              })
+            } else {
+              this.$api.business.add(Object.assign({}, this.postForm, {
+              })).then(res => {
+                if (res.code === 200) {
+                  this.$notify({
+                    title: '成功',
+                    message: '新增成功',
+                    type: 'success',
+                    duration: 2000
+                  });
+                  const back = this.$route.query.back;
+                  if (back) {
+                    this.$router.push(back)
+                  }
+                  this.initData();
+                  this.vLoading = false
+                }
+              }).catch(() => {
+                this.vLoading = false
+              })
+            }
+          }
+        })
+      },
+    }
+  }
+</script>
+<style lang="scss" scoped>
+
+</style>

src/views/market/business/list.vue

@@ -0,0 +1,370 @@
+<template>
+  <div class="app-container">
+    <div class="title-container">
+      <breadcrumb id="breadcrumb-container" class="breadcrumb-container"/>
+    </div>
+
+    <y-page-list-layout :page-list="pageData" :page-para="listQuery" :get-page-list="getList">
+      <template slot="left">
+        <PermissionButton
+          menu-code="_views_market_business_add"
+          class-name="filter-item"
+          type="primary"
+          name
+          size="mini"
+          :page-jump="true"
+          round
+          style="float: left"
+        />
+        <el-input
+          v-model="listQuery.customerName"
+          placeholder="客户名称"
+          clearable
+          style="margin-left: 20px;width: 320px;float: left;">
+        </el-input>
+        <el-input
+          v-model="listQuery.opportunityName"
+          placeholder="商机名称"
+          clearable
+          style="margin-left: 20px;width: 320px;float: left;">
+        </el-input>
+        <el-select clearable style="margin-left: 20px;width: 200px;float: left;" v-model="listQuery.state" placeholder="状态">
+          <el-option key="0" label="跟进中" value="跟进中"/>
+          <el-option key="1" label="签约" value="签约"/>
+          <el-option key="2" label="终止" value="终止"/>
+        </el-select>
+        <el-button
+          class="filter-item"
+          style="margin-left: 10px;float: left;"
+          type="primary"
+          @click="searchList"
+          round
+        >搜索
+        </el-button>
+        <el-button
+          class="filter-item"
+          style="float: left;"
+          round
+          type="warning"
+          @click="resetSearch()"
+        >重置
+        </el-button>
+      </template>
+      <parentTable
+        v-loading="listLoading"
+        :data="pageData.records"
+        slot="table"
+        style="width: 100%;"
+      >
+        <el-table-column label="客户名称" align="center" width="210">
+          <template slot-scope="{row}">
+            <span>{{ row.customerName }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="商机名称" align="center" width="210">
+          <template slot-scope="{row}">
+            <span>{{ row.opportunityName }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="预计金额" align="center" width="210">
+          <template slot-scope="{row}">
+            <span>{{ row.estimateAmount }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="预计开展日期" align="center" width="210">
+          <template slot-scope="{row}">
+            <span>{{ row.estimateDate }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="状态" align="center" width="120">
+          <template slot-scope="{row}">
+            <el-tag>{{ row.state }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="终止原因" align="center" width="210">
+          <template slot-scope="{row}">
+            <span>{{ row.offReason }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="备注" align="center" width="210">
+          <template slot-scope="{row}">
+            <span>{{ row.remark }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" width="210">
+          <template slot-scope="{row}">
+            <PermissionButton
+              menu-code="_views_market_business_detail"
+              class-name="filter-item"
+              name=""
+              type="primary"
+              :page-jump="true"
+              :page-query="{id: row.id}"
+              round
+              size="mini"
+            />
+            <PermissionButton
+              menu-code="_views_market_business_state"
+              class-name="filter-item"
+              name=""
+              type="danger"
+              round
+              size="mini"
+              @click="handleState(row.id,row.opportunityName,row.state,row.offReason)"
+            />
+          </template>
+        </el-table-column>
+      </parentTable>
+    </y-page-list-layout>
+    <el-dialog
+      width="600px"
+      title="状态流转"
+      :visible.sync="dialogFormVisible"
+      :close-on-click-modal="false"
+    >
+      <el-form
+        ref="dataForm"
+        v-loading="dialogLoading"
+        :model="temp"
+        label-position="right"
+        label-width="110px"
+        style="width: 400px; margin-left:50px;"
+      >
+        <el-form-item label="商机名称：" prop="name">
+          <el-input v-model="temp.opportunityName" class="filter-item" readonly disabled/>
+        </el-form-item>
+
+        <el-form-item label="流转状态：" filterable prop="departmentId">
+          <el-select v-model="temp.state" filterable class="filter-item" style="float: left;width: 100%;" placeholder="请选择">
+            <el-option key="0" label="跟进中" value="跟进中"/>
+            <el-option key="1" label="签约" value="签约"/>
+            <el-option key="2" label="终止" value="终止"/>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="终止原因：">
+          <el-input v-model="temp.offReason" class="filter-item" type="text"/>
+        </el-form-item>
+        <el-form-item label="">
+          <el-button @click="dialogFormVisible = false">
+            取消
+          </el-button>
+          <el-button type="primary" @click="updateState()">
+            保存
+          </el-button>
+        </el-form-item>
+      </el-form>
+    </el-dialog>
+  </div>
+</template>
+<script>
+  import YPageListLayout from '@/components/YPageListLayout'
+  import Breadcrumb from '@/components/Breadcrumb'
+  import PermissionButton from '@/components/PermissionButton/PermissionButton'
+
+  export default {
+    name: 'ViewsStaffList',
+    components: {
+      Breadcrumb,
+      YPageListLayout,
+      PermissionButton,
+    },
+    filters: {
+      statusFilter(status) {
+        const statusMap = {
+          published: 'success',
+          draft: 'info',
+          deleted: 'danger',
+        }
+        return statusMap[status]
+      },
+    },
+    data() {
+      return {
+        isDisable:false,
+        tableKey: 0,
+        pageData: { records: [] },
+        total: 20,
+        dialogLoading: false,
+        listLoading: true,
+        listQuery: {
+          page: 1,
+          size: 10,
+          descs: 'id',
+        },
+        listQueryKey: 'keyword',
+        importLoading: false,
+        AllEnum:[],
+        dialogFormVisible:false,
+        temp:{
+          state:'',
+          offReason:''
+        }
+      }
+    },
+    created() {
+      const that = this;
+      that.getAllEnum();
+      that.getList();
+    },
+    methods: {
+      handleState(businessId, businessName, state, offReason) {
+        const that = this;
+        that.temp.id = businessId;
+        that.temp.opportunityName = businessName;
+        that.temp.state = state;
+        that.temp.offReason = offReason;
+        that.dialogFormVisible = true;
+      },
+      updateState(){
+        if (this.temp.id) {
+          this.$api.business.edit(Object.assign({}, this.temp, {
+          })).then(res => {
+            if (res.code === 200) {
+              this.$notify({
+                title: '成功',
+                message: '状态流转成功',
+                type: 'success',
+                duration: 2000
+              });
+              this.dialogFormVisible = false;
+              this.getList();
+            }
+          }).catch(() => {
+            this.dialogFormVisible = false;
+          })
+        }
+      },
+      getAllEnum() {
+        const that = this;
+        that.$api.globalConfig.getAllEnum().then(data => {
+          if (data.code === 200) {
+            that.AllEnum = data.data
+          } else {
+            this.$message({
+              type: 'error',
+              message: data.msg
+            })
+          }
+        })
+      },
+      resetSearch() {
+        this.listQuery = {
+          current: 1,
+          size: 10,
+          descs: 'id',
+        }
+        this.getList()
+      },
+      removeHandle(row) {
+        // console.log(data)
+        const that = this
+        that
+          .$confirm('确认删除当前记录吗?', '警告', {
+            confirmButtonText: '确认',
+            cancelButtonText: '取消',
+            type: 'warning',
+          })
+          .then(async () => {
+            this.$api.business.delete(row.id).then((res) => {
+              if (res.code === 200) {
+                this.$message({
+                  type: 'success',
+                  message: '删除成功',
+                })
+                this.getList()
+              }
+            })
+          })
+          .catch((err) => {
+            console.error(err)
+          })
+      },
+      searchList() {
+        // 重置分页
+        this.listQuery.page = 1
+        this.listQuery.size = 10
+        this.getList()
+      },
+      getList() {
+        const that = this
+        this.listLoading = true
+        // console.log(that.listQuery)
+        const key = {}
+        key[this.listQueryKey] = this.listQuery.description
+        this.$api.business
+          .list(Object.assign({}, that.listQuery, key))
+          .then((res) => {
+            that.pageData = res.data
+            setTimeout(() => {
+              that.listLoading = false
+            }, 200)
+          })
+          .catch(() => {
+            that.listLoading = false
+          })
+      },
+      deleteInfo(id) {
+        const that = this
+        that.$confirm('请确认是否删除该数据?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning',
+          center: true
+        }).then(() => {
+          that.$api.business.delete(id).then(data => {
+            that.loading = false
+            if (data.code === 200) {
+              that.getList()
+            } else {
+              this.$message({
+                type: 'error',
+                message: data.msg
+              })
+            }
+          })
+        }).catch(() => {
+        })
+      }
+    },
+  }
+</script>
+<style lang="scss" scoped>
+  .right {
+    flex: 1;
+
+    .title {
+      font-size: 16px;
+      font-weight: 500;
+      color: rgba(51, 51, 51, 1);
+      line-height: 35px;
+      margin-bottom: 8px;
+    }
+
+    .menu-2-box {
+      display: flex;
+      flex-wrap: wrap;
+      width: 100%;
+    }
+
+    .menu-2-item {
+      display: flex;
+      align-items: center;
+      color: #656565;
+      font-size: 12px;
+      width: 230px;
+      height: 101px;
+      background: rgb(255, 185, 129);
+      border-radius: 3px;
+      padding-left: 20px;
+      margin-right: 10px;
+      margin-bottom: 10px;
+      cursor: pointer;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
+
+      .text {
+        margin-left: 16px;
+      }
+    }
+  }
+</style>

src/views/market/customer/detail.vue

@@ -31,60 +31,22 @@
                     <el-col :xs="24" :sm="12" :lg="6" :span="6">
                       <el-form-item
                         label="省市县："
-                        prop="province"
-                        :rules="{required: true, message: '请选择省份', trigger: 'blur'}"
+                        prop="citys"
+                        :rules="{required: true, message: '请选择', trigger: 'blur'}"
                         label-width="120px"
                         class="postInfo-container-item"
                       >
                         <el-cascader
                           filterable
-                          v-model="postForm.value"
+                          v-model="postForm.citys"
                           :options="districtsOptions"
                           :props="{ expandTrigger: 'hover' }"
                           @change="handleChange"
-                          style="width: 100%"></el-cascader>
-                      </el-form-item>
-                    </el-col>
-                    <el-col :xs="24" :sm="12" :lg="6" :span="6">
-                      <el-form-item
-                        label="市："
-                        prop="city"
-                        :rules="{required: true, message: '请选择市', trigger: 'blur'}"
-                        label-width="120px"
-                        class="postInfo-container-item"
-                      >
-                        <el-select
-                          v-model="postForm.city"
-                          placeholder=""
-                          clearable
-                          filterable
-                          class="filter-item"
-                          style="width: 100%"
-                        >
-                          <el-option v-for="(item, index) in AllEnum['市级']" :key="index" :label="item" :value="item"/>
-                        </el-select>
-                      </el-form-item>
-                    </el-col>
-                    <el-col :xs="24" :sm="12" :lg="6" :span="6">
-                      <el-form-item
-                        label="区/县："
-                        prop="county"
-                        :rules="{required: true, message: '请选择区/县', trigger: 'blur'}"
-                        label-width="120px"
-                        class="postInfo-container-item"
-                      >
-                        <el-select
-                          v-model="postForm.county"
-                          placeholder=""
-                          clearable
-                          filterable
-                          class="filter-item"
-                          style="width: 100%"
-                        >
-                          <el-option v-for="(item, index) in AllEnum['区/县级']" :key="index" :label="item" :value="item"/>
-                        </el-select>
+                          style="width:480px"></el-cascader>
                       </el-form-item>
                     </el-col>
+                  </el-row>
+                  <el-row>
                     <el-col :xs="24" :sm="12" :lg="6" :span="6">
                       <el-form-item
                         label="部门："
@@ -164,7 +126,7 @@
                         label-width="120px"
                         class="postInfo-container-item"
                       >
-                        <el-input v-model="postForm.address" class="filter-item" style="width: 480px"/>
+                        <el-input v-model="postForm.address" class="filter-item" style="width: 100%"/>
                       </el-form-item>
                     </el-col>
                   </el-row>
@@ -191,6 +153,7 @@
       return {
         type: 'detail',
         postForm: {
+          citys:[51, 5105, 510521]
         },
         dataId: this.$route.query.id,
         activeName: 'first',

src/views/market/customer/list.vue

@@ -17,12 +17,12 @@
           style="float: left"
         />
         <el-input
-          v-model="name"
+          v-model="listQuery.name"
           placeholder="客户名称"
           clearable
           style="margin-left: 20px;width: 320px;float: left;">
         </el-input>
-        <el-select clearable style="margin-left: 20px;width: 200px;float: left;" v-model="listQuery.resignState" placeholder="客户等级">
+        <el-select clearable style="margin-left: 20px;width: 200px;float: left;" v-model="listQuery.level" placeholder="客户等级">
           <el-option v-for="(item, index) in AllEnum['客户等级']" :key="index" :label="item" :value="item"/>
         </el-select>
         <el-button
@@ -55,12 +55,12 @@
         </el-table-column>
         <el-table-column label="市" align="center" width="120">
           <template slot-scope="{row}">
-            <span>{{ row.city }}</span>
+            <span>{{ row.firstCity }}</span>
           </template>
         </el-table-column>
         <el-table-column label="区/县" align="center" width="120">
           <template slot-scope="{row}">
-            <span>{{ row.county }}</span>
+            <span>{{ row.secCity }}</span>
           </template>
         </el-table-column>
         <el-table-column label="部门" align="center" width="120">
@@ -168,7 +168,8 @@
         importLoading: false,
         name:null,
         city:null,
-        county:null
+        county:null,
+        AllEnum:[]
       }
     },
     created() {

src/views/market/payment/detailList.vue

@@ -0,0 +1,213 @@
+<template>
+  <div class="app-container">
+    <div class="title-container">
+      <breadcrumb id="breadcrumb-container" class="breadcrumb-container"/>
+    </div>
+
+    <y-page-list-layout :page-list="pageData" :page-para="listQuery" :get-page-list="getList">
+      <template slot="left">
+        <el-input
+          v-model="listQuery.name"
+          placeholder="回款名称"
+          clearable
+          style="margin-left: 20px;width: 320px;float: left;">
+        </el-input>
+        <el-button
+          class="filter-item"
+          style="margin-left: 10px;float: left;"
+          type="primary"
+          @click="searchList"
+          round
+        >搜索
+        </el-button>
+        <el-button
+          class="filter-item"
+          style="float: left;"
+          round
+          type="warning"
+          @click="resetSearch()"
+        >重置
+        </el-button>
+      </template>
+      <parentTable
+        v-loading="listLoading"
+        :data="pageData.records"
+        slot="table"
+        style="width: 100%;"
+      >
+        <el-table-column label="项目名称" align="center" width="310">
+          <template slot-scope="{row}">
+            <span>{{ row.itemName }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="回款名称" align="center" width="310">
+          <template slot-scope="{row}">
+            <span>{{ row.name }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="回款金额" align="center" width="310">
+          <template slot-scope="{row}">
+            <span>{{ row.amount }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="回款日期" align="center" width="310">
+          <template slot-scope="{row}">
+            <span>{{ row.paymentDate }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" >
+          <template slot-scope="{row}">
+            <el-button
+              class="filter-item download-button"
+              style="margin-left: 10px;"
+              icon="el-icon-delete-solid"
+              type="danger"
+              @click="deleteInfo(row.id)"
+            >
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </parentTable>
+    </y-page-list-layout>
+  </div>
+</template>
+<script>
+  import YPageListLayout from '@/components/YPageListLayout'
+  import Breadcrumb from '@/components/Breadcrumb'
+  import PermissionButton from '@/components/PermissionButton/PermissionButton'
+
+  export default {
+    name: 'ViewsStaffList',
+    components: {
+      Breadcrumb,
+      YPageListLayout,
+      PermissionButton,
+    },
+    filters: {
+      statusFilter(status) {
+        const statusMap = {
+          published: 'success',
+          draft: 'info',
+          deleted: 'danger',
+        }
+        return statusMap[status]
+      },
+    },
+    data() {
+      return {
+        tableKey: 0,
+        pageData: { records: [] },
+        total: 20,
+        listLoading: true,
+        listQuery: {
+          page: 1,
+          size: 10,
+          descs: 'id',
+          itemId : this.$route.query.id
+        },
+        listQueryKey: 'keyword'
+      }
+    },
+    created() {
+      const that = this;
+      that.getList();
+    },
+    methods: {
+      resetSearch() {
+        this.listQuery = {
+          current: 1,
+          size: 10,
+          descs: 'id',
+          itemId: this.$route.query.id
+        }
+        this.getList()
+      },
+      searchList() {
+        // 重置分页
+        this.listQuery.page = 1
+        this.listQuery.size = 10
+        this.getList()
+      },
+      getList() {
+        const that = this
+        this.listLoading = true
+        // console.log(that.listQuery)
+        const key = {}
+        key[this.listQueryKey] = this.listQuery.description
+        this.$api.payment
+          .list(Object.assign({}, that.listQuery, key))
+          .then((res) => {
+            that.pageData = res.data
+            setTimeout(() => {
+              that.listLoading = false
+            }, 200)
+          })
+          .catch(() => {
+            that.listLoading = false
+          })
+      },
+      deleteInfo(id) {
+        const that = this
+        that.$confirm('请确认是否删除该数据?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning',
+          center: true
+        }).then(() => {
+          that.$api.payment.delete(id).then(data => {
+            that.loading = false
+            if (data.code === 200) {
+              that.getList()
+            } else {
+              this.$message({
+                type: 'error',
+                message: data.msg
+              })
+            }
+          })
+        }).catch(() => {
+        })
+      }
+    },
+  }
+</script>
+<style lang="scss" scoped>
+  .right {
+    flex: 1;
+
+    .title {
+      font-size: 16px;
+      font-weight: 500;
+      color: rgba(51, 51, 51, 1);
+      line-height: 35px;
+      margin-bottom: 8px;
+    }
+
+    .menu-2-box {
+      display: flex;
+      flex-wrap: wrap;
+      width: 100%;
+    }
+
+    .menu-2-item {
+      display: flex;
+      align-items: center;
+      color: #656565;
+      font-size: 12px;
+      width: 230px;
+      height: 101px;
+      background: rgb(255, 185, 129);
+      border-radius: 3px;
+      padding-left: 20px;
+      margin-right: 10px;
+      margin-bottom: 10px;
+      cursor: pointer;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
+
+      .text {
+        margin-left: 16px;
+      }
+    }
+  }
+</style>

src/views/market/payment/list.vue

@@ -0,0 +1,323 @@
+<template>
+  <div class="app-container">
+    <div class="title-container">
+      <breadcrumb id="breadcrumb-container" class="breadcrumb-container"/>
+    </div>
+
+    <y-page-list-layout :page-list="pageData" :page-para="listQuery" :get-page-list="getList">
+      <template slot="left">
+        <el-input
+          v-model="listQuery.itemName"
+          placeholder="项目名称"
+          clearable
+          style="margin-left: 20px;width: 320px;float: left;"
+        >
+        </el-input>
+        <el-button
+          class="filter-item"
+          style="margin-left: 10px;float: left;"
+          type="primary"
+          @click="searchList"
+          round
+        >搜索
+        </el-button>
+        <el-button
+          class="filter-item"
+          style="float: left;"
+          round
+          type="warning"
+          @click="resetSearch()"
+        >重置
+        </el-button>
+      </template>
+      <parentTable
+        v-loading="listLoading"
+        :data="pageData.records"
+        slot="table"
+        style="width: 100%;"
+      >
+        <el-table-column label="事业部流水号" align="center" width="160">
+          <template slot-scope="{row}">
+            <span>{{ row.businessNo }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="项目编号" align="center" width="160">
+          <template slot-scope="{row}">
+            <span>{{ row.oaNo }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="项目名称" align="center" width="160">
+          <template slot-scope="{row}">
+            <span>{{ row.name }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="客户经理" align="center" width="160">
+          <template slot-scope="{row}">
+            <span>{{ row.clientManager }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="委托单位" align="center" width="160">
+          <template slot-scope="{row}">
+            <span>{{ row.clientUnit}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="合同签订时间" align="center" width="160">
+          <template slot-scope="{row}">
+            <span>{{ row.signDate}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="合同金额（元）" align="center" width="160">
+          <template slot-scope="{row}">
+            <span>{{ row.amount}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="已收款金额（元）" align="center" width="160">
+          <template slot-scope="{row}">
+            <span style="color: green">{{ row.payedAmount}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="未收款金额（元）" align="center" width="160">
+          <template slot-scope="{row}">
+            <span style="color: red">{{ row.notPayedAmount}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center">
+          <template slot-scope="{row}">
+            <PermissionButton
+              menu-code="_views_market_payment_list"
+              class-name="filter-item"
+              type="primary"
+              :page-jump="true"
+              :page-query="{id: row.id}"
+              round
+              size="mini"
+            />
+            <PermissionButton
+              menu-code="_views_market_payment_add"
+              class-name="filter-item"
+              type="success"
+              round
+              size="mini"
+              @click="handleAdd(row.id,row.name)"
+            />
+          </template>
+        </el-table-column>
+      </parentTable>
+    </y-page-list-layout>
+    <el-dialog
+      width="600px"
+      title="新增回款"
+      :visible.sync="dialogFormVisible"
+      :close-on-click-modal="false"
+      custom-class="paymentDialog"
+    >
+      <el-form
+        ref="dataForm"
+        v-loading="dialogLoading"
+        :model="temp"
+        label-position="right"
+        label-width="110px"
+        style="width: 400px; margin-left:50px;"
+      >
+        <el-form-item label="项目名称：" prop="itemName">
+          <el-input v-model="temp.itemName" class="filter-item" readonly disabled/>
+        </el-form-item>
+
+        <el-form-item label="回款名称：" prop="name" :rules="{required: true, message: '请填写回款名称', trigger: 'blur'}">
+          <el-input v-model="temp.name" class="filter-item"/>
+        </el-form-item>
+
+        <el-form-item label="回款金额：" prop="amount" :rules="{required: true, message: '请填写回款金额', trigger: 'blur'}">
+          <el-input v-model.number="temp.amount" class="filter-item"/>
+        </el-form-item>
+        <el-form-item
+          label="回款日期："
+          prop="paymentDate"
+          :rules="{required: true, message: '请选择日期', trigger: 'blur'}"
+          class="filter-item"
+        >
+          <el-date-picker
+            v-model="temp.paymentDate"
+            type="date"
+            value-format="yyyy-MM-dd"
+            style="width: 100%"
+            placeholder="选择日期"
+            class="filter-item"
+          />
+        </el-form-item>
+        <el-form-item label="">
+          <el-button @click="dialogFormVisible = false">
+            取消
+          </el-button>
+          <el-button type="primary" @click="save()">
+            保存
+          </el-button>
+        </el-form-item>
+      </el-form>
+    </el-dialog>
+  </div>
+</template>
+<script>
+  import YPageListLayout from '@/components/YPageListLayout'
+  import Breadcrumb from '@/components/Breadcrumb'
+  import PermissionButton from '@/components/PermissionButton/PermissionButton'
+
+  export default {
+    name: 'ViewsItemList',
+    components: {
+      Breadcrumb,
+      YPageListLayout,
+      PermissionButton,
+    },
+    filters: {
+      statusFilter(status) {
+        const statusMap = {
+          published: 'success',
+          draft: 'info',
+          deleted: 'danger',
+        }
+        return statusMap[status]
+      },
+    },
+    data() {
+      return {
+        isDisable:false,
+        tableKey: 0,
+        pageData: { records: [] },
+        total: 20,
+        listLoading: true,
+        dialogLoading:false,
+        dialogFormVisible:false,
+        listQuery: {
+          page: 1,
+          size: 10,
+          // name: '',
+          // staffNo: '',
+          descs: 'id',
+          itemName:null
+        },
+        listQueryKey: 'keyword',
+        importLoading: false,
+        temp:{
+          name:'',
+          amount:'',
+          itemName:'',
+          itemId:''
+        }
+      }
+    },
+    created() {
+      const that = this;
+      that.getList()
+    },
+    methods: {
+      save(){
+        if (this.temp.itemId){
+          this.$refs.dataForm.validate(valid => {
+            if (valid) {
+              this.$api.payment.add(Object.assign({}, this.temp, {
+              })).then(res => {
+                if (res.code === 200) {
+                  this.$notify({
+                    title: '成功',
+                    message: '新增成功',
+                    type: 'success',
+                    duration: 2000
+                  });
+                  this.getList();
+                  this.temp.itemId = null;
+                  this.temp.name = null;
+                  this.temp.amount = null;
+                  this.temp.paymentDate = null;
+                  this.dialogFormVisible = false
+                }
+              }).catch(() => {
+                this.dialogFormVisible = false
+              })
+            }
+          })
+        }
+      },
+      handleAdd(itemId, itemName) {
+        const that = this;
+        that.temp.itemId = itemId;
+        that.temp.itemName = itemName;
+        that.dialogFormVisible = true;
+        this.$nextTick(() => {
+          this.$refs['dataForm'].clearValidate()
+        })
+      },
+      resetSearch() {
+        this.listQuery = {
+          current: 1,
+          size: 10,
+          descs: 'id',
+          me: false
+        }
+        this.getList()
+      },
+      searchList() {
+        // 重置分页
+        this.listQuery.page = 1
+        this.listQuery.size = 20
+        this.getList()
+      },
+      getList() {
+        const that = this
+        this.listLoading = true
+        const key = {}
+        this.$api.payment.itemPayment(Object.assign({}, that.listQuery, key)).then((res) => {
+            that.pageData = res.data
+            setTimeout(() => {
+              that.listLoading = false
+            }, 200)
+          })
+          .catch(() => {
+            that.listLoading = false
+          })
+      },
+    },
+  }
+</script>
+<style lang="scss" scoped>
+  .right {
+    flex: 1;
+
+    .title {
+      font-size: 16px;
+      font-weight: 500;
+      color: rgba(51, 51, 51, 1);
+      line-height: 35px;
+      margin-bottom: 8px;
+    }
+
+    .menu-2-box {
+      display: flex;
+      flex-wrap: wrap;
+      width: 100%;
+    }
+
+    .menu-2-item {
+      display: flex;
+      align-items: center;
+      color: #656565;
+      font-size: 12px;
+      width: 230px;
+      height: 101px;
+      background: rgb(255, 185, 129);
+      border-radius: 3px;
+      padding-left: 20px;
+      margin-right: 10px;
+      margin-bottom: 10px;
+      cursor: pointer;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
+
+      .text {
+        margin-left: 16px;
+      }
+    }
+  }
+  /deep/.paymentDialog{
+    border-radius: 20px;
+  }
+</style>