右侧备注区域;提交备注接口有问题,待调试

nuxt.config.js

@@ -35,7 +35,7 @@ module.exports = {
   */
   css: [
     'element-ui/lib/theme-chalk/index.css',
-    '@/assets/css/main.css',
+    '@/static/css/main.css',
   ],
 
   /*

pages/main/index/wage_settlement.vue

@@ -1,106 +1,138 @@
 <template>
-  <div v-if="detail" id="wage-settlement">
-    <h3>工资结算</h3>
-    <h4>
-      【
-      <a :href="orderHref">{{detail.job.title_count}}</a>
-      】{{detail.time.month}}工资账单
-      <el-tag size="small">{{detail.statusName}}</el-tag>
-      <el-tag size="small" v-if="detail.is_use_deposit=='1'">使用押金结算</el-tag>
-    </h4>
-    <section class="container">
-      <span class="title">每月薪资：</span>
-      ￥{{salary.job_salary}}/月
-    </section>
-    <section class="container">
-      <span class="title">工作周期：</span>
-      {{detail.time.start_time | dateFormat}} 至 {{detail.time.end_time | dateFormat}} ({{detail.days}}天)
-    </section>
-    <section class="container">
-      <span class="title">托管金额：</span>
-      ￥{{detail.company.company_pay}}
-    </section>
-    <section v-if="detail.normal_days > 0" class="container">
-      <span class="title">正式工资：</span>
-      ￥{{salary.normal_salary}}({{detail.normal_days}}天)
-    </section>
-    <section v-if="detail.probation_days > 0" class="container">
-      <span class="title">试用工资：</span>
-      ￥{{salary.probation_salary}}({{detail.probation_days}}天，按月工资{{rate.probation_rate}}%结算)
-    </section>
-    <section class="container">
-      <span class="title">结算比例：</span>
-      <el-input type="number" v-model="detail.work_hour.work_rate"></el-input>
-      % (工作工时：{{detail.work_hour.worked_hours}}/{{detail.work_hour.should_work_hours}})
-    </section>
-    <section class="container">
-      <span class="title">扣减工资：</span>
-      <el-input type="number" v-model="salary.deduction_fee"></el-input>元
-    </section>
-    <section class="container salary-container">
-      <span class="title">本月工资：</span>
-      <section>
-        <div class="salary-result">￥{{baseSalary}}</div>
-        <div
-          class="salary-calc"
-        >=({{salary.normal_salary}}+{{salary.probation_salary}})*{{detail.work_hour.work_rate}}%-{{salary.deduction_fee}}</div>
+  <section v-if="detail" id="wage-settlement">
+    <section class="left">
+      <h3>工资结算</h3>
+      <h4>
+        【
+        <a :href="orderHref">{{detail.job.title_count}}</a>
+        】{{detail.time.month}}工资账单
+        <el-tag size="small">{{detail.statusName}}</el-tag>
+        <el-tag size="small" v-if="detail.is_use_deposit=='1'">使用押金结算</el-tag>
+      </h4>
+      <section class="container">
+        <span class="title">每月薪资：</span>
+        ￥{{salary.job_salary}}/月
       </section>
-    </section>
-    <section class="container">
-      <span class="title">平台服务费：</span>
-      <el-input type="number" v-model="rate.origin_person_service_fee_rate"></el-input>
-      VIP会员减免{{rate.person_service_fee_rate_reduce}}% ￥{{vipMinus}} (开发者服务费率{{devServiceRate}}%)
-    </section>
-    <section class="container">
-      <span class="title">应缴税费：</span>
-      <el-checkbox type="checkbox" v-model="payable"></el-checkbox>
-      ￥{{shouldRate}} (开发者税率{{devRate}}%)
-    </section>
-    <section class="container salary-container">
-      <span class="title">实际工资：</span>
-      <section>
-        <div class="salary-result">￥{{personPrice}}</div>
-        <div class="salary-calc">
-          <span>=(({{salary.normal_salary}}+{{salary.probation_salary}})*{{detail.work_hour.work_rate}}%-{{salary.deduction_fee * 1}})*(1-{{rate.person_service_fee_rate}}%)</span>
-          <span v-if="payable">*(1-{{rate.person_tax_rate}}%-{{rate.person_tax_service_fee_rate}}%)</span>
-        </div>
+      <section class="container">
+        <span class="title">工作周期：</span>
+        {{detail.time.start_time | dateFormat}} 至 {{detail.time.end_time | dateFormat}} ({{detail.days}}天)
+      </section>
+      <section class="container">
+        <span class="title">托管金额：</span>
+        ￥{{detail.company.company_pay}}
+      </section>
+      <section v-if="detail.normal_days > 0" class="container">
+        <span class="title">正式工资：</span>
+        ￥{{salary.normal_salary}}({{detail.normal_days}}天)
+      </section>
+      <section v-if="detail.probation_days > 0" class="container">
+        <span class="title">试用工资：</span>
+        ￥{{salary.probation_salary}}({{detail.probation_days}}天，按月工资{{rate.probation_rate}}%结算)
+      </section>
+      <section class="container">
+        <span class="title">结算比例：</span>
+        <el-input type="number" v-model="detail.work_hour.work_rate"></el-input>
+        % (工作工时：{{detail.work_hour.worked_hours}}/{{detail.work_hour.should_work_hours}})
+      </section>
+      <section class="container">
+        <span class="title">扣减工资：</span>
+        <el-input type="number" v-model="salary.deduction_fee"></el-input>元
+      </section>
+      <section class="container salary-container">
+        <span class="title">本月工资：</span>
+        <section>
+          <div class="salary-result">￥{{baseSalary}}</div>
+          <div
+            class="salary-calc"
+          >=({{salary.normal_salary}}+{{salary.probation_salary}})*{{detail.work_hour.work_rate}}%-{{salary.deduction_fee}}</div>
+        </section>
+      </section>
+      <section class="container">
+        <span class="title">平台服务费：</span>
+        <el-input type="number" v-model="rate.origin_person_service_fee_rate"></el-input>
+        VIP会员减免{{rate.person_service_fee_rate_reduce}}% ￥{{vipMinus}} (开发者服务费率{{devServiceRate}}%)
+      </section>
+      <section class="container">
+        <span class="title">应缴税费：</span>
+        <el-checkbox type="checkbox" v-model="payable"></el-checkbox>
+        ￥{{shouldRate}} (开发者税率{{devRate}}%)
+      </section>
+      <section class="container salary-container">
+        <span class="title">实际工资：</span>
+        <section>
+          <div class="salary-result">￥{{personPrice}}</div>
+          <div class="salary-calc">
+            <span>=(({{salary.normal_salary}}+{{salary.probation_salary}})*{{detail.work_hour.work_rate}}%-{{salary.deduction_fee * 1}})*(1-{{rate.person_service_fee_rate}}%)</span>
+            <span
+              v-if="payable"
+            >*(1-{{rate.person_tax_rate}}%-{{rate.person_tax_service_fee_rate}}%)</span>
+          </div>
+        </section>
+      </section>
+      <!-- 本月结束合作，下月未托管费用 -->
+      <section v-if="detail.can_use_deposit" class="container">
+        <el-checkbox v-model="is_use_deposit" style="margin: 0 4px 0 0;" disabled checked></el-checkbox>
+        使用押金结算(￥{{detail.company.company_left_deposit}})(企业方费用：￥{{companyPrice}})
+      </section>
+      <section class="container">
+        <span class="title">退还金额：</span>
+        <el-input type="text" :value="returnMoney" disabled></el-input>
+        =(({{salary.normal_salary}}+{{salary.probation_salary}})-{{baseSalary}})*(1+{{rate.company_service_fee_rate}}%)
+        <span
+          v-if="payable"
+        >*(1+{{detail.is_invoice ? rate.company_tax_rate : 0}}%)</span>元
+      </section>
+      <section class="container">
+        <span class="title">备注说明：</span>
+        <el-input v-model="detail.remark"></el-input>
       </section>
-    </section>
-    <!-- 本月结束合作，下月未托管费用 -->
-    <section v-if="detail.can_use_deposit" class="container">
-      <el-checkbox v-model="is_use_deposit" style="margin: 0 4px 0 0;" disabled checked></el-checkbox>
-      使用押金结算(￥{{detail.company.company_left_deposit}})(企业方费用：￥{{companyPrice}})
-    </section>
-    <section class="container">
-      <span class="title">退还金额：</span>
-      <el-input type="text" :value="returnMoney" disabled></el-input>
-      =(({{salary.normal_salary}}+{{salary.probation_salary}})-{{baseSalary}})*(1+{{rate.company_service_fee_rate}}%)
-      <span
-        v-if="payable"
-      >*(1+{{detail.is_invoice ? rate.company_tax_rate : 0}}%)</span>元
-    </section>
-    <section class="container">
-      <span class="title">备注说明：</span>
-      <el-input v-model="detail.remark"></el-input>
-    </section>
-    <el-button v-show="detail.status == 2 || detail.status == 3" @click="jobPeriodSettle('save')">保存</el-button>
-    <section v-if="detail.can_send_salary" class="container" style="margin-top: 20px;">
       <el-button
-        type="primary"
-        v-show="detail.status == 3"
-        @click="jobPeriodSettle('confirm')"
-      >确定支付工资</el-button>
+        v-show="detail.status == 2 || detail.status == 3"
+        @click="jobPeriodSettle('save')"
+      >保存</el-button>
+      <section v-if="detail.can_send_salary" class="container" style="margin-top: 20px;">
+        <el-button
+          type="primary"
+          v-show="detail.status == 3"
+          @click="jobPeriodSettle('confirm')"
+        >确定支付工资</el-button>
+      </section>
+    </section>
+    <section class="right">
+      <textarea v-model="remind" placeholder="请输入备注" maxlength="200"></textarea>
+      <el-button style="width: 100px;" @click="clickRemindSave" type="primary">保存</el-button>
+      <section class="reminds">
+        <section class="remind" v-for="remind of reminds" :key="remind.id">
+          <img class="remind-head" :src="remind.icon_url" alt="icon">
+          <section class="remind-right">
+            <section class="remind-top">
+              <span class="remind-nickname">{{remind.nickname}}</span>
+              <span class="remind-date">{{remind.create_date}}</span>
+            </section>
+            <p class="remind-content">{{remind.content}}</p>
+          </section>
+        </section>
+      </section>
+      <el-pagination layout="prev, pager, next" :total="total" :page-size="20" @current-change="changePagination"></el-pagination>
     </section>
-  </div>
+  </section>
 </template>
 
 <script>
 // 现在环境是线上还是测试, 默认线上
 let env = ''
+// 备注页码
+let currentPage = 1
 
 export default {
   data() {
     return {
+      // 全部备注数量
+      total: 0,
+      // 历史备注
+      reminds: [],
+      // 备注信息
+      remind: '',
       job_id: '',
       period_id: '',
       payable: false,
@@ -215,9 +247,56 @@ export default {
     this.job_id = this.$route.query.job_id
     this.period_id = this.$route.query.period_id
     this.getData()
+    this.getReminds()
   },
   methods: {
     /**
+     * 备注页码变化
+     */
+    changePagination(page) {
+      this.getReminds(page)
+    },
+    async getReminds(page = currentPage) {
+      this.reminds = []
+      let {status, data} = await this.$post('/api/admin/job/getPeriodNote', { period_id: this.period_id, page })
+      currentPage = page
+      console.log(data)
+      if(status) {
+        this.total = data.total
+        this.reminds = data.list
+      }
+    },
+    /**
+     * 点击提交备注
+     */
+    async clickRemindSave() {
+      console.log(this.remind)
+      if(!this.remind.length) {
+        this.$message({
+          message: '请输入备注',
+          type: 'warning'
+        })
+        return
+      }
+      let content = `${this.remind} -账单ID${this.job_id}`
+      let res = await this.$post('/api/admin/job/note', { id: this.period_id, content })
+      console.log(res)
+      if(res.status) {
+        this.$message({
+          message: '保存成功',
+          type: 'success'
+        })
+        setTimeout(() => {
+          location.reload()
+        }, 1500);
+      } else {
+        this.$message({
+          message: '保存失败',
+          type: 'error'
+        })
+      }
+    },
+    /**
      * 有效数字控制
      */
     keepDecimal(num) {
@@ -280,8 +359,13 @@ export default {
 
 <style scoped>
 #wage-settlement {
+  display: flex;
   padding: 20px;
 }
+.left,
+.right {
+  flex: 1;
+}
 .container {
   display: flex;
   align-items: center;
@@ -305,4 +389,39 @@ export default {
 .el-input {
   width: 180px;
 }
+textarea {
+  resize: none;
+  width: 100%;
+  height: 120px;
+  padding: 12px;
+}
+.reminds {
+  margin-top: 40px;
+  height: 600px;
+  overflow-y: scroll;
+}
+.remind {
+  display: flex;
+  margin-bottom: 40px;
+}
+.remind-head {
+  --width: 40px;
+  width: var(--width);
+  height: var(--width);
+  border-radius: 50%;
+}
+.remind-right {
+  display: flex;
+  flex-direction: column;
+}
+.remind-nickname {
+  font-weight: 800;
+}
+.remind-date {
+  color: #999;
+}
+.remind-content {
+  border-left: 4px solid #d8d8d8;
+  padding-left: 10px;
+}
 </style>

plugins/http.js

@@ -72,6 +72,7 @@ const request = async (method, path, data, payload = {}) => {
     return
   } else {
     Vue.prototype.$message.error(rData.info)
+    rData.status = 0
     return rData
   }
 }

assets/css/main.css

@@ -7,4 +7,8 @@ html {
 #main .ql-snow .ql-picker-label {
   display: flex;
   align-items: center;
+}
+
+textarea:focus {
+  outline: 0;
 }