人工财务管理页面

assets/css/common.css

@@ -44,6 +44,9 @@ textarea:focus {
 .floatr {
 	float: right;
 }
+.point {
+	cursor: pointer;
+}
 .floatl {
 	float: left;
 }
@@ -70,3 +73,7 @@ textarea:focus {
 .tablex table td {
 	text-align: center !important;
 }
+.state-border {
+	width: 70px;
+	display: inline-block;
+}

components/menu/data.js

@@ -10,6 +10,10 @@ export default [
 				path: baseUrl + 'cloud_order'
 			},
 			{
+				title: '人工订单',
+				path: baseUrl + 'cloud_artificial'
+			},
+			{
 				title: '云端结算',
 				path: baseUrl + 'cloud_balance'
 			},

pages/main/index/cloud_artificial.vue

@@ -0,0 +1,359 @@
+<template>
+  <div id="cloud-balance">
+    <!-- <section class="top"> -->
+    <!-- <h3>交易订单中心</h3> -->
+    <!-- <section> -->
+    <div class="type-boxs">
+      <div class="clear">
+        <div class="floatr">
+          <el-button type="primary">新增订单</el-button>
+          <el-button>导出报表</el-button>
+        </div>
+      </div>
+    </div>
+    <!-- </section> -->
+    <!-- </section> -->
+    <div class>
+      <!-- height="250" -->
+      <el-table :data="tableData3" border style="width: 100%">
+        <el-table-column prop="date" label="订单名称">
+          <template slot-scope="scope">
+            <span class="lblue point">{{scope.row.name}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="name" label="用户"></el-table-column>
+        <el-table-column label="实际金额">
+          <template slot-scope="scope">
+            <span :class="parseInt(scope.row.money)>0?'green':'orange'">{{scope.row.money}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="name" label="收支类型"></el-table-column>
+        <el-table-column prop="name" label="支付方式"></el-table-column>
+        <el-table-column prop="name" label="交易类型"></el-table-column>
+        <el-table-column prop="name" width="100" label="订单类型">
+          <template slot-scope="scope">
+            <span v-if="scope.row.state==1" class="state-success state-border">成功</span>
+            <span v-if="scope.row.state==2" class="state-wait state-border">待提交</span>
+            <span v-if="scope.row.state==3" class="state-load state-border">提交中</span>
+            <span v-if="scope.row.state==4" class="state-faile state-border">失败</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="name" label="创建时间"></el-table-column>
+        <el-table-column prop="name" label="创建者"></el-table-column>
+        <el-table-column prop="name" label="订单编号"></el-table-column>
+        <el-table-column prop="name" label="支付编号"></el-table-column>
+
+        <el-table-column label="关联项目">
+          <template slot-scope="scope">
+            <span class="lblue">{{scope.row.name}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="编辑">
+          <template slot-scope="scope">
+            <span v-if="scope.row.state==2" class="lblue point">编辑</span>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <div class="order-footer">
+      <el-pagination
+        background
+        @current-change="getTableData"
+        @size-change="changePageSize"
+        :current-page.sync="currentPage"
+        :page-sizes="[10, 20, 30, 40]"
+        :page-size="20"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="totalCount"
+      ></el-pagination>
+    </div>
+  </div>
+</template>
+
+<script>
+const tableHeaders = [
+  "项目ID",
+  "核定价格",
+  "托管费用",
+  "押金",
+  "次月托管",
+  "结算周期",
+  "结算金额",
+  "退回金额",
+  "预计发薪",
+  "发薪日期",
+  "状态",
+  "负责人",
+  "操作",
+  "备注",
+  "项目状态",
+  "账单ID",
+  "企业方",
+  "开发者",
+  "试用天数"
+];
+const tableProps = [
+  "job_id",
+  "salary",
+  "company_pay",
+  "p_company_deposit",
+  "next_period_pay",
+  "payAround",
+  "pay_to_dev",
+  "return_money",
+  "pre_send_salary_timeShow", //
+  "send_salary_time",
+  "p_status_name",
+  "chk_user",
+  "operate",
+  "settle_msg",
+  "j_status_name",
+  "id",
+  "company",
+  "dev_realname",
+  "probation_days"
+];
+const tableWidths = [
+  "80",
+  "80",
+  "100",
+  "80",
+  "100",
+  "120",
+  "80",
+  "80",
+  "90",
+  "80",
+  "80",
+  "100",
+  "80",
+  "180",
+  "80",
+  "80",
+  "100",
+  "100",
+  "80"
+];
+
+export default {
+  data() {
+    return {
+      tradeList: [
+        {
+          id: 0,
+          type: "全部"
+        },
+        {
+          id: 1,
+          type: "充值"
+        },
+        {
+          id: 2,
+          type: "提现"
+        },
+        {
+          id: 3,
+          type: "购买"
+        },
+        {
+          id: 4,
+          type: "购买"
+        }
+      ],
+
+      tableData3: [
+        {
+          date: "2016-05-03",
+          name: "王小虎",
+          money: "200",
+          state: 1
+        },
+        {
+          date: "2016-05-02",
+          name: "王小虎",
+          money: "-100",
+          state: 2
+        },
+        {
+          date: "2016-05-04",
+          name: "王小虎",
+          money: "-100",
+          state: 3
+        },
+        {
+          date: "2016-05-01",
+          name: "王小虎",
+          money: "-100",
+          state: 4
+        },
+        {
+          date: "2016-05-08",
+          name: "王小虎",
+          money: "2100",
+          state: 1
+        },
+        {
+          date: "2016-05-06",
+          name: "王小虎",
+          money: "-1200",
+          state: 4
+        },
+        {
+          date: "2016-05-07",
+          name: "王小虎",
+          money: "-100",
+          state: 1
+        }
+      ],
+
+      // 下发的总数据
+      totalData: {},
+      // 项目ID
+      jobID: "",
+      // 审核人
+      period: "",
+      status: "",
+
+      // 负责人
+      checkUser: "",
+      // 审核人列表
+      periodStatusList: [],
+      // 数据总条目
+      totalCount: 0,
+      currentPage: 1,
+      currentPageSize: 20,
+      // 列表宽度
+      tableWidths,
+      // 列表头显示内容
+      tableHeaders,
+      // 列表头字段
+      tableProps,
+      // 列表数据
+      tableData: [],
+      localData: {
+        env: "test"
+      }
+    };
+  },
+  computed: {
+    isTest() {
+      return this.localData.env === "test";
+    }
+  },
+  mounted() {
+    this.getTableData();
+  },
+  methods: {
+    // 格式化列表数据
+    formatTableData(data) {
+      return data.map(i => ({
+        ...i,
+        payAround: `${i.start_time}<br>${i.end_time}`,
+        pre_send_salary_timeShow: new Date(
+          i.pre_send_salary_time * 1000
+        ).toLocaleDateString()
+      }));
+    },
+
+    // 获取列表数据
+    async getTableData() {
+      this.tableData = [];
+      let url = "/api/admin/job/get_all_periods";
+      let body = { page: this.currentPage, page_size: this.currentPageSize };
+      if (this.status) body.j_status = this.status;
+      if (this.period) body.p_status = this.period;
+      if (this.checkUser) body.chk_user = this.checkUser;
+      if (this.jobID) body.job_id = this.jobID;
+      const res = await this.$post(url, body);
+      const data = res.data;
+      this.tableData = this.formatTableData(data.list);
+      this.totalData = data;
+      // // console.log(this.tableData)
+      this.totalCount = Number(data.total);
+      this.totalPage = data.totalPage;
+      this.localData.env = data.current_env;
+    }
+  }
+};
+</script>
+
+<style scoped>
+.order-footer {
+  position: absolute;
+  bottom: 10px;
+  left: 10px;
+}
+#order-wrap {
+  width: 100%;
+}
+#cloud-balance {
+  white-space: nowrap;
+  overflow-x: scroll;
+  height: calc(100% - 40px);
+}
+.top {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  height: 270px;
+}
+.selector-box {
+  /* margin-top: 10px; */
+}
+.selector-box {
+  display: flex;
+  justify-content: space-between;
+}
+/* .selector-box-left {
+} */
+.table {
+  margin-top: 10px;
+  height: calc(100% - 320px);
+}
+.order-table {
+  /* height: calc(100% - 300px); */
+}
+.end-row {
+  background: rgba(0, 0, 0, 0.1);
+}
+.inlineb {
+  display: inline-block;
+}
+.vsub {
+  vertical-align: sub;
+}
+.type-boxs {
+  margin-bottom: 10px;
+}
+.green {
+  color: rgba(37, 155, 36, 1);
+}
+.orange {
+  color: rgba(255, 152, 0, 1);
+}
+.state-success {
+  display: inline-block;
+  padding: 0px 8px;
+  text-align: center;
+  border: 1px solid rgb(48, 142, 255);
+}
+.state-wait {
+  display: inline-block;
+  padding: 0px 8px;
+  text-align: center;
+  border: 1px solid rgb(134, 130, 130);
+}
+
+.state-load {
+  display: inline-block;
+  padding: 0px 8px;
+  text-align: center;
+  border: 1px solid rgb(37, 155, 36);
+}
+.state-faile {
+  display: inline-block;
+  padding: 0px 8px;
+  text-align: center;
+  border: 1px solid rgb(229, 28, 35);
+}
+</style>

pages/main/index/cloud_order.vue

@@ -166,10 +166,10 @@
         <el-table-column prop="name" label="支付编号"></el-table-column>
         <el-table-column prop="name" width="100" label="订单类型">
           <template slot-scope="scope">
-            <span v-if="scope.row.state==1" class="state-success">成功</span>
-            <span v-if="scope.row.state==2" class="state-wait">待提交</span>
-            <span v-if="scope.row.state==3" class="state-load">提交中</span>
-            <span v-if="scope.row.state==4" class="state-faile">失败</span>
+            <span v-if="scope.row.state==1" class="state-success state-border">成功</span>
+            <span v-if="scope.row.state==2" class="state-wait state-border">待提交</span>
+            <span v-if="scope.row.state==3" class="state-load state-border">提交中</span>
+            <span v-if="scope.row.state==4" class="state-faile state-border">失败</span>
           </template>
         </el-table-column>
         <el-table-column prop="name" label="交易类型"></el-table-column>