10-25lhj

src/components/Resource/GroundDetailedfees.vue

@@ -0,0 +1,157 @@
+<template>
+    <div>
+        <div class="grounddetafees-all">
+            <div class="grounddetafees-head">
+                <div class="grounddetafees-head-li">
+                    <label>团组名称:</label>
+                    <el-select v-model="value" filterable placeholder="请选择">
+                        <el-option
+                        v-for="item in options"
+                        :key="item.id"
+                        :label="item.groupName"
+                        :value="item.id">
+                        </el-option>
+                    </el-select>
+                </div>
+                <div>
+                    <el-button type="primary">生 成</el-button>
+                    <el-button type="primary">保存数据</el-button>
+                    <el-button type="primary">返 回</el-button>
+                </div>
+            </div>
+            <div class="grounddetafees-info">
+                <div class="grounddetafees-info-li">
+                    <label>团 号：</label>
+                    <span>团 号：</span>
+                </div>
+                <div class="grounddetafees-info-li">
+                    <label>客 户：</label>
+                    <span>客 户：</span>
+                </div>
+                <div class="grounddetafees-info-li">
+                    <label>出访国家：</label>
+                    <span>出访国家：</span>
+                </div>
+                <div class="grounddetafees-info-li">
+                    <label>起止日期：</label>
+                    <span> 起止日期：</span>
+                </div>
+                <div class="grounddetafees-info-li">
+                    <label>天数/人数：</label>
+                    <span>天数/人数：</span>
+                </div>
+            </div>
+            <div class="grounddetafees-table">
+                <el-table
+                :data="tableData"
+                border
+                style="width: 100%">
+                <el-table-column
+                prop="date"
+                label="费用项目"
+                width="180">
+                </el-table-column>
+                <el-table-column
+                prop="name"
+                label="金额"
+                width="180">
+                    <!-- eslint-disable-next-line -->
+                    <template slot-scope="scope">
+                        <el-input v-model="scope.row.name" autocomplete="off"></el-input>
+                    </template>
+                </el-table-column>
+                <el-table-column
+                prop="name"
+                label="币种"
+                width="180">
+                    <template slot-scope="scope">
+                        <el-input v-model="scope.row.name" autocomplete="off"></el-input>
+                    </template>
+                </el-table-column>
+                <el-table-column
+                prop="name"
+                label="费用明细"
+                width="180">
+                    <template slot-scope="scope">
+                        <el-input v-model="scope.row.name" autocomplete="off"></el-input>
+                    </template>
+                </el-table-column>
+                <el-table-column
+                prop="name"
+                label="备注"
+                width="180">
+                    <template slot-scope="scope">
+                        <el-input v-model="scope.row.name" autocomplete="off"></el-input>
+                    </template>
+                </el-table-column>
+                <el-table-column
+                prop="address"
+                label="地址">
+                </el-table-column>
+                </el-table>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    data() {
+        return {
+            value:'',
+            options:'',
+            tableData: [{
+                date: '2016-05-02',
+                name: '王小虎',
+                address: '上海市普陀区金沙江路 1518 弄'
+            }, {
+                date: '2016-05-04',
+                name: '王小虎',
+                address: '上海市普陀区金沙江路 1517 弄'
+            }, {
+                date: '2016-05-01',
+                name: '王小虎',
+                address: '上海市普陀区金沙江路 1519 弄'
+            }, {
+                date: '2016-05-03',
+                name: '王小虎',
+                address: '上海市普陀区金沙江路 1516 弄'
+            }]
+        }
+    },
+}
+</script>
+<style>
+.grounddetafees-all{
+    background-color: #fff;
+    padding: 10px;
+    box-shadow: 0 0 5px #0005;
+    border-radius: 10px;
+    height: 100%;
+    min-height: 840px;
+}
+.grounddetafees-head-li label{
+    color: #606266;
+    font-size: 15px;
+    font-weight: 600;
+}
+.grounddetafees-head{
+    display: flex;
+    justify-content: space-between;
+}
+.grounddetafees-info{
+    display: flex;
+    margin-top: 10px;
+}
+.grounddetafees-info-li label{
+    color: #606266;
+    font-size: 15px;
+    font-weight: 600;
+}
+.grounddetafees-info-li span{ 
+    color: #606266;
+    font-size: 14px;
+}
+.grounddetafees-table{
+    margin-top: 10px;
+}
+</style>

src/components/Resource/GroundEntry.vue

@@ -0,0 +1,270 @@
+<template>
+    <div>
+        <div class="groundentry-all">
+            <el-dialog title="新增数据" class="btnpd" :visible.sync="dialogFormVisible">
+                <el-form :model="form">
+                    <div class="add-form">
+                        <el-form-item size="medium" label="团队名称" :label-width="formLabelWidth">
+                            <el-select v-model="form.region" placeholder="请选择活动区域">
+                                <el-option label="区域一" value="shanghai"></el-option>
+                                <el-option label="区域二" value="beijing"></el-option>
+                            </el-select>
+                        </el-form-item>
+                        <el-form-item size="medium" label="团 号" :label-width="formLabelWidth">
+                            <el-input v-model="form.name" autocomplete="off"></el-input>
+                        </el-form-item>
+                        <el-form-item size="medium" label="客 户" :label-width="formLabelWidth">
+                            <el-input v-model="form.name" autocomplete="off"></el-input>
+                        </el-form-item>
+                        <el-form-item size="medium" label="出访国家" :label-width="formLabelWidth">
+                            <el-input v-model="form.name" autocomplete="off"></el-input>
+                        </el-form-item>
+                        <el-form-item size="medium" label="地 区" :label-width="formLabelWidth">
+                            <el-input v-model="form.name" autocomplete="off"></el-input>
+                        </el-form-item>
+                        <el-form-item size="medium" label="服务时间起" :label-width="formLabelWidth">
+                            <el-input v-model="form.name" autocomplete="off"></el-input>
+                        </el-form-item>
+                        <el-form-item size="medium" label="服务时间止" :label-width="formLabelWidth">
+                            <el-input v-model="form.name" autocomplete="off"></el-input>
+                        </el-form-item>
+                        <el-form-item size="medium" label="付款标识" :label-width="formLabelWidth">
+                            <el-input v-model="form.name" autocomplete="off"></el-input>
+                        </el-form-item>
+                        <el-form-item size="medium" label="服务类型" :label-width="formLabelWidth">
+                            <el-select v-model="form.region" placeholder="请选择活动区域">
+                                <el-option label="区域一" value="shanghai"></el-option>
+                                <el-option label="区域二" value="beijing"></el-option>
+                            </el-select>
+                        </el-form-item>
+                        <el-form-item size="medium" label="服务公司" :label-width="formLabelWidth">
+                            <el-input v-model="form.name" autocomplete="off"></el-input>
+                        </el-form-item>
+                        <el-form-item size="medium" label="地接导游" :label-width="formLabelWidth">
+                            <el-input v-model="form.name" autocomplete="off"></el-input>
+                        </el-form-item>
+                        <el-form-item size="medium" label="联系电话" :label-width="formLabelWidth">
+                            <el-input v-model="form.name" autocomplete="off"></el-input>
+                        </el-form-item>
+                        <el-form-item size="medium" label="Bus名称" :label-width="formLabelWidth">
+                            <el-input v-model="form.name" autocomplete="off"></el-input>
+                        </el-form-item>
+                        <el-form-item size="medium" label="Bus描述" :label-width="formLabelWidth">
+                            <el-input v-model="form.name" autocomplete="off"></el-input>
+                        </el-form-item>
+                        <el-form-item size="medium" label="联系电话" :label-width="formLabelWidth">
+                            <el-input v-model="form.name" autocomplete="off"></el-input>
+                        </el-form-item>
+                    </div>
+                    <div class="groundentry-remark">
+                        <el-form-item label="服务描述" :label-width="formLabelWidth">
+                            <el-input :rows="3" type="textarea" v-model="form.name"></el-input>
+                        </el-form-item>
+                        <el-form-item label="备注" :label-width="formLabelWidth">
+                            <el-input :rows="3" type="textarea" v-model="form.name"></el-input>
+                        </el-form-item>
+                    </div>
+                </el-form>
+                <div slot="footer" class="dialog-footer">
+                    <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
+                    <el-button @click="dialogFormVisible = false">取 消</el-button>
+                </div>
+            </el-dialog>
+            <div class="groundentry-head">
+                <div class="groundentry-head-li">
+                    <label>团组名称:</label>
+                    <el-select v-model="value" filterable placeholder="请选择">
+                        <el-option
+                        v-for="item in options"
+                        :key="item.id"
+                        :label="item.groupName"
+                        :value="item.id">
+                        </el-option>
+                    </el-select>
+                </div>
+                <div class="groundentry-info">
+                    <div class="groundentry-info-li">
+                        <label>团 号：</label>
+                        <span>团 号：</span>
+                    </div>
+                    <div class="groundentry-info-li">
+                        <label>客 户：</label>
+                        <span>客 户：</span>
+                    </div>
+                    <div class="groundentry-info-li">
+                        <label>出访国家：</label>
+                        <span>出访国家：</span>
+                    </div>
+                    <div class="groundentry-info-li">
+                        <label>起止日期：</label>
+                        <span> 起止日期：</span>
+                    </div>
+                    <div class="groundentry-info-li">
+                        <label>天数/人数：</label>
+                        <span>天数/人数：</span>
+                    </div>
+                </div>
+            </div>
+            <div class="addgroundentry-btn">
+                <el-button type="primary" @click="dialogFormVisible = true">新增数据</el-button>
+            </div>
+            <div class="groundentry-table">
+                <el-table
+                :data="tableData"
+                border
+                style="width: 100%">
+                    <el-table-column
+                    label="序号"
+                    type="index"
+                    width="50">
+                    </el-table-column>
+                    <el-table-column
+                    prop="date"
+                    label="地区"
+                    width="180">
+                    </el-table-column>
+                    <el-table-column
+                    prop="date"
+                    label="服务导游"
+                    width="100">
+                    </el-table-column>
+                    <el-table-column
+                    prop="date"
+                    label="导游联系电话"
+                    width="110">
+                    </el-table-column>
+                    <el-table-column
+                    prop="name"
+                    label="Bus名称"
+                    width="100">
+                    </el-table-column>
+                    <el-table-column
+                    prop="name"
+                    label="Bus联系电话"
+                    width="110">
+                    </el-table-column>
+                    <el-table-column
+                    prop="name"
+                    label="服务时间起"
+                    width="100">
+                    </el-table-column>
+                    <el-table-column
+                    prop="name"
+                    label="服务时间止"
+                    width="100">
+                    </el-table-column>
+                    <el-table-column
+                    prop="name"
+                    label="服务报价"
+                    width="100">
+                    </el-table-column>
+                    <el-table-column
+                    prop="name"
+                    label="是否审核"
+                    width="100">
+                    </el-table-column>
+                    <el-table-column
+                    prop="name"
+                    label="详细费用"
+                    width="100">
+                    </el-table-column>
+                    <el-table-column
+                    prop="address"
+                    label="操 作">
+                    </el-table-column>
+              </el-table>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    data() {
+        return {
+            value:'',
+            options:[],
+            tableData: [{
+                date: '2016-05-02',
+                name: '王小虎',
+                address: '上海市普陀区金沙江路 1518 弄'
+            }, {
+                date: '2016-05-04',
+                name: '王小虎',
+                address: '上海市普陀区金沙江路 1517 弄'
+            }, {
+                date: '2016-05-01',
+                name: '王小虎',
+                address: '上海市普陀区金沙江路 1519 弄'
+            }, {
+                date: '2016-05-03',
+                name: '王小虎',
+                address: '上海市普陀区金沙江路 1516 弄'
+            }],
+            dialogFormVisible: false,
+            formLabelWidth:'120px',
+            form: {
+                name: '',
+                region: '',
+                date1: '',
+                date2: '',
+                delivery: false,
+                type: [],
+                resource: '',
+            desc: ''
+            },
+        }
+    },
+}
+</script>
+<style>
+.groundentry-all{
+    background-color: #fff;
+    padding: 10px;
+    box-shadow: 0 0 5px #0005;
+    border-radius: 10px;
+    height: 100%;
+    min-height: 840px;
+}
+.groundentry-head-li label{
+    color: #606266;
+    font-size: 15px;
+    font-weight: 600;
+}
+.groundentry-head{
+    display: flex;
+    justify-content: space-between;
+}
+.groundentry-info{
+    display: flex;
+    margin-top: 10px;
+}
+.groundentry-info-li label{
+    color: #606266;
+    font-size: 15px;
+    font-weight: 600;
+}
+.groundentry-info-li span{ 
+    color: #606266;
+    font-size: 14px;
+}
+.groundentry-table{
+    margin-top: 10px;
+}
+.addgroundentry-btn{
+    margin-top: 10px;
+    text-align: right;
+}
+.add-form{
+    display: flex;
+    flex-wrap:wrap ;
+}
+.add-form .el-form-item{
+    width: 32%;
+}
+.groundentry-remark .el-textarea__inner{
+    width: 95.5%;
+}
+.btnpd  .el-dialog__footer{
+    padding: 10px 54px 20px;
+}
+</style>>

src/router/index.js

@@ -75,7 +75,9 @@ import invitationLetter from '@/components/Resource/invitationLetter'
 import EntryDetails from '@/components/OP/EntryDetails'
 import TicketBlackCode from '@/components/Resource/TicketBlackCode'
 import OpTicketBlackCode from '@/components/Resource/OpTicketBlackCode'
-import Payroll from '@/components/Finance/Payroll';
+import Payroll from '@/components/system/Payroll';
+import GroundEntry from '@/components/Resource/GroundEntry';
+import GroundDetailedfees from '@/components/Resource/GroundDetailedfees';
 
 
 Vue.use(Router)
@@ -445,6 +447,16 @@ export default new Router({
           name: 'Payroll',
           component: Payroll
         },
+        {
+          path: '/home/GroundEntry',
+          name: 'GroundEntry',
+          component: GroundEntry
+        },
+        {
+          path: '/home/GroundDetailedfees',
+          name: 'GroundDetailedfees',
+          component: GroundDetailedfees
+        },
       ]
     },
     {