选择企业组件修改；选择联系人组件；工作组项目页面；进度条组件

src/components/ProgressBar.vue

@@ -0,0 +1,80 @@
+<!--进度组件-->
+<template>
+  <div class="progress">
+    <!--    将全部付款和部分付款放入一个div中-->
+    <div class="full-and-partial"
+         :style="{width: (data.payInFull + data.partialPayment)/(data.payInFull + data.partialPayment + data.nonPayment) * 100 + '%'}">
+      <div :style="{width: data.payInFull/(data.payInFull + data.partialPayment) * 100 + '%'}"
+           class="progress-item pay-in-full">
+        {{ data.payInFull }}
+      </div>
+      <div :style="{width: data.partialPayment/(data.payInFull + data.partialPayment) * 100 + '%'}"
+           class="progress-item partial-payment">
+        {{ data.partialPayment }}
+      </div>
+    </div>
+    <div :style="{width: data.nonPayment/(data.payInFull + data.partialPayment + data.nonPayment) * 100 + '%'}"
+         class="progress-item non-payment">
+      {{ data.nonPayment }}
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ProgressBar',
+  props: {
+    /**
+     * 进度字段，
+     * {
+     *   payInFull: 10, // 已付全款
+     *   partialPayment: 10, // 部分付款
+     *   nonPayment: 10, // 未付款
+     * }
+     */
+    data: {
+      type: Object,
+      required: false,
+      default: () => {
+        return {}
+      }
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.progress {
+  border-radius: 10px;
+  background-color: rgb(232, 232, 232);
+  height: 20px;
+  width: 100%;
+  display: flex;
+}
+
+.full-and-partial {
+  background-color: rgb(0, 133, 192);
+  display: flex;
+  border-radius: 10px;
+}
+
+.progress-item {
+  border-radius: 10px;
+  color: white;
+  line-height: 20px;
+  text-align: center;
+}
+
+.pay-in-full {
+  background-color: rgb(7, 168, 161);
+}
+
+.partial-payment {
+  background-color: rgb(0, 133, 192);
+}
+
+.non-payment {
+  color: rgb(88,100,95);
+  background-color: rgb(232, 232, 232);
+}
+</style>

src/components/company/BusinessSelect.vue

@@ -75,6 +75,7 @@ export default {
         list: '/company/payCompanyManagement/list',
       },
       selectedCompany: {},
+      selectedRowKeys: [],
       columns: [
         {
           title: '序号',
@@ -116,6 +117,7 @@ export default {
     },
     onSelectChange(selectedRowKeys, selectionRows) {
       this.selectedCompany = selectionRows[0]
+      this.selectedRowKeys = selectedRowKeys
     }
   }
 }
@@ -123,10 +125,4 @@ export default {
 
 <style scoped lang="less">
 @import '~@assets/less/common.less';
-
-// 把表格单选样式改成实心圆
-/deep/ .ant-radio-input:focus + .ant-radio-inner {
-  background: #069f99;
-  border-radius: 100px;
-}
 </style>

src/components/company/CompanySelect.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="company-select">
     <a-input @click="chooseBusiness" :value="value[valueKey]" v-bind="$attrs"></a-input>
-    <business-select ref="businessSelect" @ok="handleOk"></business-select>
+    <business-select ref="businessSelect" @ok="handleOk" v-bind="$attrs"></business-select>
   </div>
 </template>
 
@@ -39,6 +39,7 @@ export default {
         return
       }
       this.$refs.businessSelect.visible = true
+      this.$refs.businessSelect.selectedRowKeys.push(this.value.id)
     },
     /**
      * 选中后抛出企业信息（id, companyName)

src/components/company/SelectContacts.vue

@@ -0,0 +1,99 @@
+<template>
+  <!--  在点击组件时获取联系人列表-->
+  <div>
+    <a-row>
+      <a-col :span="20">
+        <a-select :value="value" v-bind="$attrs" v-on="$listeners">
+          <a-select-option v-for="item in contactsList" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
+        </a-select>
+      </a-col>
+      <a-col :span="4" class="form-btn">
+        <a-button icon="plus" @click="addContacts"></a-button>
+      </a-col>
+    </a-row>
+    <contact-management-module ref="contactForm"
+                               is-company-disabled
+                               :selected-company="selectedCompany"
+                               v-on="$listeners">
+    </contact-management-module>
+  </div>
+</template>
+
+<script>
+import ContactManagementModule from '@views/businessManagement/modules/ContactManagementModule'
+import { getContactsByCompany } from '@api/api'
+
+export default {
+  name: 'SelectContacts',
+  components: { ContactManagementModule },
+  props: {
+    // 已选中的企业信息
+    selectedCompany: {
+      type: Object,
+      required: false,
+      default: () => {
+        return {}
+      }
+    },
+    value: {
+      type: String,
+      required: false,
+      default: undefined
+    }
+  },
+  data() {
+    return {
+      contactsList: [], // 该企业下联系人列表
+    }
+  },
+  watch: {
+    /**
+     * 选中企业发生变化时重新获取数据
+     */
+    selectedCompany: {
+      handler() {
+        this.getContactsList()
+      },
+      deep: true
+    }
+  },
+  methods: {
+    /**
+     * 获取联系人数据
+     */
+    getContactsList() {
+      if (this.selectedCompany) {
+        const params = {
+          companyName: this.selectedCompany.companyName
+        }
+        getContactsByCompany(params).then(res => {
+          this.contactsList = res.result
+        })
+      }
+    },
+    /**
+     * 新建联系人
+     */
+    addContacts() {
+      if (this.selectedCompany) {
+        this.$refs.contactForm.add()
+        this.$refs.contactForm.title = '新增'
+        this.$refs.contactForm.disableSubmit = false
+        return
+      }
+      this.$message.warn('请先选择来款企业再为该企业新建联系人')
+    }
+  },
+  model: {
+    prop: 'value',
+    event: 'change'
+  }
+}
+</script>
+
+<style scoped>
+.form-btn {
+  padding-top: 1px;
+  padding-left: 8px;
+}
+</style>