|  |  | <template> | 
|  |  | <el-row> | 
|  |  | <el-card  style="background-color: #F5F7FA"> | 
|  |  | <!--            搜索区域--> | 
|  |  | <el-row  class="toolbar"> | 
|  |  | <el-col :span="5"> | 
|  |  | <el-input v-model="queryInfo.companyId" prefix-icon="el-icon-search" size="small" style="width: 240px" | 
|  |  | placeholder="公司ID" clearable> | 
|  |  | <template slot="prepend">公司ID</template> | 
|  |  | </el-input> | 
|  |  | </el-col> | 
|  |  | <el-col :span="5"> | 
|  |  | <el-input v-model="queryInfo.busnessType" prefix-icon="el-icon-search" size="small" style="width: 240px" | 
|  |  | placeholder="业务类型" clearable> | 
|  |  | <template slot="prepend">业务类型</template> | 
|  |  | </el-input> | 
|  |  | </el-col> | 
|  |  | <el-col :span="5"> | 
|  |  | <div class="my-text-area"> | 
|  |  | <div class="el-input-group__prepend prepand">生效状态</div> | 
|  |  | <el-select v-model="queryInfo.state" placeholder="生效状态" size="small" style="width: 140px"> | 
|  |  | <el-option label="生效" value="Y"></el-option> | 
|  |  | <el-option label="失效" value="N"></el-option> | 
|  |  | </el-select> | 
|  |  | </div> | 
|  |  | </el-col> | 
|  |  | <el-col :span="5"> | 
|  |  | <el-button type="primary" icon="el-icon-search" size="small" @click="getList()"> | 
|  |  | 查询 | 
|  |  | </el-button> | 
|  |  | <el-button type="success" icon="el-icon-edit" size="small" @click="applyAdd()">新增</el-button> | 
|  |  | </el-col> | 
|  |  | </el-row> | 
|  |  | <!--            列表区域--> | 
|  |  | <el-row> | 
|  |  | <template> | 
|  |  | <el-table | 
|  |  | :data="tableData" | 
|  |  | border | 
|  |  | :cell-style="{textAlign:'center'}" | 
|  |  | style="border-radius: 10px 10px 0px 0px;line-height: 25px" | 
|  |  | :header-cell-style="{background:'#6F8294',color:'#FFFFFF'}" size="small" | 
|  |  | > | 
|  |  | <el-table-column | 
|  |  | prop="creatUserid" | 
|  |  | label="创建人" | 
|  |  | width="140"> | 
|  |  | </el-table-column> | 
|  |  | <el-table-column | 
|  |  | prop="busnessType" | 
|  |  | label="业务类型" | 
|  |  | width="140"> | 
|  |  | </el-table-column> | 
|  |  | <el-table-column | 
|  |  | prop="feeType" | 
|  |  | label="费用类别" | 
|  |  | width="140"> | 
|  |  | </el-table-column> | 
|  |  | <el-table-column | 
|  |  | prop="rate" | 
|  |  | label="优惠折扣" | 
|  |  | width="120"> | 
|  |  | </el-table-column> | 
|  |  | <el-table-column | 
|  |  | prop="state" | 
|  |  | label="生效状态" | 
|  |  | width="120"> | 
|  |  | <template slot-scope="scope"> | 
|  |  | <span v-if="scope.row.busnessType ==='Y'">生效</span> | 
|  |  | <span v-if="scope.row.busnessType ==='N'">失效</span> | 
|  |  | </template> | 
|  |  | </el-table-column> | 
|  |  | <!--                        <el-table-column--> | 
|  |  | <!--                                fixed--> | 
|  |  | <!--                                prop="companyId"--> | 
|  |  | <!--                                label="公司ID"--> | 
|  |  | <!--                                width="160">--> | 
|  |  | <!--                        </el-table-column>--> | 
|  |  | <!--                        <el-table-column--> | 
|  |  | <!--                                prop="companyCode"--> | 
|  |  | <!--                                label="公司代码"--> | 
|  |  | <!--                                width="130">--> | 
|  |  | <!--                        </el-table-column>--> | 
|  |  | <el-table-column | 
|  |  | prop="creatTime" | 
|  |  | label="开始时间" | 
|  |  | width="180"> | 
|  |  | </el-table-column> | 
|  |  | <el-table-column | 
|  |  | prop="updateTime" | 
|  |  | label="结束时间" | 
|  |  | width="180"> | 
|  |  | </el-table-column> | 
|  |  | <el-table-column | 
|  |  | fixed="right" | 
|  |  | label="操作" | 
|  |  | width="160"> | 
|  |  | <template slot-scope="scope"> | 
|  |  | <el-button type="success" size="mini" @click="applyEdit(scope.row)">编辑</el-button> | 
|  |  | <el-button type="danger" size="mini" @click="applyDel(scope.row)">删除</el-button> | 
|  |  | </template> | 
|  |  | </el-table-column> | 
|  |  | </el-table> | 
|  |  | </template> | 
|  |  | </el-row> | 
|  |  | <el-row style="margin-top: 10px" class="toolbar"> | 
|  |  | <el-pagination | 
|  |  | @size-change="handleSizeChange" | 
|  |  | @current-change="handleCurrentChange" | 
|  |  | :current-page="queryInfo.limitSize" | 
|  |  | :page-size="queryInfo.pageSize" | 
|  |  | :page-sizes="[10, 50, 100, 500]" | 
|  |  | layout="total, sizes, prev, pager, next, jumper" | 
|  |  | :total="total"> | 
|  |  | </el-pagination> | 
|  |  | </el-row> | 
|  |  | <el-row> | 
|  |  | <el-dialog :title="dialogMap[dialogApply]" :visible.sync="apply_dialog" width="70%" > | 
|  |  | <el-form  :model="addForm"  :rules="rules" ref="addForm" style="margin-top: 40px"> | 
|  |  | <el-row> | 
|  |  | <el-col :span="11"> | 
|  |  | <el-form-item label=" " :label-width="formLabelWidth"  prop="creatUserid"> | 
|  |  | <el-input v-model="addForm.creatUserid" autocomplete="off" size="small" style="width: 260px"> | 
|  |  | <template slot="prepend">创建人</template> | 
|  |  | </el-input> | 
|  |  | </el-form-item> | 
|  |  | </el-col> | 
|  |  | </el-row> | 
|  |  | <el-row> | 
|  |  | <el-col :span="11"> | 
|  |  | <el-form-item label=" " :label-width="formLabelWidth" prop="feeType"> | 
|  |  | <el-input v-model="addForm.feeType" autocomplete="off" size="small" style="width: 260px"> | 
|  |  | <template slot="prepend">费用类型</template> | 
|  |  | </el-input> | 
|  |  | </el-form-item> | 
|  |  | </el-col> | 
|  |  | <el-col :span="12"> | 
|  |  | <el-form-item label=" " :label-width="formLabelWidth"  prop="busnessType"> | 
|  |  | <el-input v-model="addForm.busnessType" autocomplete="off" size="small" style="width: 260px"> | 
|  |  | <template slot="prepend">业务类型</template> | 
|  |  | </el-input> | 
|  |  | </el-form-item> | 
|  |  | </el-col> | 
|  |  | </el-row> | 
|  |  | <el-row> | 
|  |  | <el-col :span="11"> | 
|  |  | <el-form-item label=" " :label-width="formLabelWidth"  prop="rate"> | 
|  |  | <el-input v-model="addForm.rate" autocomplete="off" size="small" style="width: 260px"> | 
|  |  | <template slot="prepend">优惠折扣</template> | 
|  |  | </el-input> | 
|  |  | </el-form-item> | 
|  |  | </el-col> | 
|  |  | <el-col :span="12"> | 
|  |  | <el-form-item label=" " :label-width="formLabelWidth"  prop="state"> | 
|  |  | <div class="my-text-area"> | 
|  |  | <div class="el-input-group__prepend prepand">生效状态</div> | 
|  |  | <el-select v-model="addForm.state" placeholder="请选择生效状态" size="small" style="width: 170px"> | 
|  |  | <el-option label="生效" value="Y"></el-option> | 
|  |  | <el-option label="失效" value="N"></el-option> | 
|  |  | </el-select> | 
|  |  | </div> | 
|  |  | </el-form-item> | 
|  |  | </el-col> | 
|  |  | </el-row> | 
|  |  | <!--                        <el-row>--> | 
|  |  | <!--                            <el-col :span="11">--> | 
|  |  | <!--                                <el-form-item label=" " :label-width="formLabelWidth"  prop="creatTime">--> | 
|  |  | <!--                                    <div class="my-text-area">--> | 
|  |  | <!--                                        <div class="el-input-group__prepend prepand">开始时间</div>--> | 
|  |  | <!--                                        <el-date-picker--> | 
|  |  | <!--                                                v-model="addForm.creatTime"--> | 
|  |  | <!--                                                type="datetime" size="mini"--> | 
|  |  | <!--                                                value-format="yyyy-MM-dd HH:mm:ss"--> | 
|  |  | <!--                                                format="yyyy-MM-dd HH:mm:ss"--> | 
|  |  | <!--                                                style="width:170px"--> | 
|  |  | <!--                                                placeholder="选择开始时间">--> | 
|  |  | <!--                                        </el-date-picker>--> | 
|  |  | <!--                                    </div>--> | 
|  |  | <!--                                </el-form-item>--> | 
|  |  | <!--                            </el-col>--> | 
|  |  | <!--                            <el-col :span="12">--> | 
|  |  | <!--                                <el-form-item label=" " :label-width="formLabelWidth"  prop="updateTime">--> | 
|  |  | <!--                                    <div class="my-text-area">--> | 
|  |  | <!--                                        <div class="el-input-group__prepend prepand">结束时间</div>--> | 
|  |  | <!--                                        <el-date-picker--> | 
|  |  | <!--                                                v-model="addForm.updateTime"--> | 
|  |  | <!--                                                type="datetime" size="mini"--> | 
|  |  | <!--                                                value-format="yyyy-MM-dd HH:mm:ss"--> | 
|  |  | <!--                                                format="yyyy-MM-dd HH:mm:ss"--> | 
|  |  | <!--                                                style="width:170px"--> | 
|  |  | <!--                                                placeholder="选择结束时间">--> | 
|  |  | <!--                                        </el-date-picker>--> | 
|  |  | <!--                                    </div>--> | 
|  |  | <!--                                </el-form-item>--> | 
|  |  | <!--                            </el-col>--> | 
|  |  | <!--                        </el-row>--> | 
|  |  | </el-form> | 
|  |  | <div slot="footer" class="dialog-footer"> | 
|  |  | <el-button @click="apply_dialog = false" size="small">取 消</el-button> | 
|  |  | <el-button type="primary" @click="dialogApply==='create'?add():edit()" size="small">提 交</el-button> | 
|  |  | </div> | 
|  |  | </el-dialog> | 
|  |  | </el-row> | 
|  |  | </el-card> | 
|  |  | </el-row> | 
|  |  | </template> | 
|  |  |  | 
|  |  | <script> | 
|  |  | import {list,save,edit,remove} from '../../api/consigner/cost'; | 
|  |  |  | 
|  |  | export default { | 
|  |  | name: "discount", | 
|  |  | data() { | 
|  |  | return { | 
|  |  | queryInfo: { | 
|  |  | companyId:'', | 
|  |  | busnessType:'', | 
|  |  | state:'', | 
|  |  | // 当前页数 | 
|  |  | limitSize: 1, | 
|  |  | // 每页大小 | 
|  |  | pageSize: 10, | 
|  |  | }, | 
|  |  | total: 0, | 
|  |  | tableData:[], | 
|  |  | dialogMap: { | 
|  |  | update: '编辑', | 
|  |  | create: '新增' | 
|  |  | }, | 
|  |  | dis: undefined, | 
|  |  | dialogApply: 'create', | 
|  |  | apply_dialog: false, | 
|  |  | addForm: { | 
|  |  | busnessType: '', | 
|  |  | companyCode: '', | 
|  |  | companyId: '', | 
|  |  | creatTime: '', | 
|  |  | creatUserid: '', | 
|  |  | feeType: '', | 
|  |  | id:'', | 
|  |  | rate:'', | 
|  |  | state:'', | 
|  |  | updateTime:'' | 
|  |  | }, | 
|  |  | formLabelWidth: '220px', | 
|  |  | rules: { | 
|  |  | companyId: [ | 
|  |  | {  required: true, message: '必填', trigger: 'change' } | 
|  |  | ], | 
|  |  | // needCount: [ | 
|  |  | //     { required: true, message: '请输入需要车辆数量', trigger: 'blur' }, | 
|  |  | // ], | 
|  |  | // orginStation: [ | 
|  |  | //     { required: true, message: '请输入起始场站', trigger: 'blur' }, | 
|  |  | // ], | 
|  |  | // endStation: [ | 
|  |  | //     { required: true, message: '请输入目的场站', trigger: 'blur' }, | 
|  |  | // ], | 
|  |  | }, | 
|  |  | } | 
|  |  | }, | 
|  |  | methods: { | 
|  |  | handleSizeChange(val) { | 
|  |  | this.queryInfo.pageSize = val | 
|  |  | this.getList() | 
|  |  | }, | 
|  |  | handleCurrentChange(val) { | 
|  |  | this.queryInfo.limitSize = val | 
|  |  | this.getList() | 
|  |  | }, | 
|  |  | getList() { | 
|  |  | const _this = this | 
|  |  | list(this.queryInfo).then((response) => { | 
|  |  | const res = response.data | 
|  |  | console.log(response.data) | 
|  |  | if (res.code !== '200') { | 
|  |  | return _this.$message.error('获取消息收发记录,失败!') | 
|  |  | } | 
|  |  | // 获取列表数据 | 
|  |  | _this.tableData = res.data.list | 
|  |  | // 获取列表的总记录数 | 
|  |  | _this.total = res.data.total | 
|  |  | _this.$message.success('获取消息收发记录,成功!') | 
|  |  | }).catch(error => { | 
|  |  | // 关闭加载 | 
|  |  | _this.$message.error(error.toString()) | 
|  |  | }) | 
|  |  | }, | 
|  |  | // 添加对话框,打开事件 | 
|  |  | applyAdd() { | 
|  |  | this.addForm = { | 
|  |  | busnessType: '', | 
|  |  | companyCode: '', | 
|  |  | companyId: '', | 
|  |  | creatTime: '', | 
|  |  | creatUserid: '', | 
|  |  | feeType: '', | 
|  |  | id:'', | 
|  |  | rate:'', | 
|  |  | state:'', | 
|  |  | updateTime:'' | 
|  |  | }; | 
|  |  | this.dialogApply= 'create'; | 
|  |  | this.dis= 'create'; | 
|  |  | this.apply_dialog = true; | 
|  |  | }, | 
|  |  | // 添加功能 | 
|  |  | add() { | 
|  |  | this.$refs.addForm.validate(valid => { | 
|  |  | // 未通过,表单预校验 | 
|  |  | if (!valid) return; | 
|  |  | save(this.addForm).then((response) => { | 
|  |  | let res = response.data; | 
|  |  | // 添加失败 | 
|  |  | if (res.code !== '200') { | 
|  |  | return this.$message.error(res.msg); | 
|  |  | } | 
|  |  | // 添加,成功 | 
|  |  | this.$message.success(res.msg); | 
|  |  | // 隐藏对话框 | 
|  |  | this.apply_dialog = false; | 
|  |  | // 刷新列表 | 
|  |  | this.getList(); | 
|  |  | }).catch(error => { | 
|  |  | this.$message.error(error.toString()); | 
|  |  | }); | 
|  |  | }) | 
|  |  | }, | 
|  |  | // 打开编辑 | 
|  |  | applyEdit(row) { | 
|  |  | this.apply_dialog = true; | 
|  |  | this.dialogApply = 'update'; | 
|  |  | this.dis= 'update'; | 
|  |  | this.addForm=row; | 
|  |  | }, | 
|  |  | // 编辑功能 | 
|  |  | edit() { | 
|  |  | // 进行表单的预验证 | 
|  |  | this.$refs.addForm.validate(valid => { | 
|  |  | // 未通过,表单预校验 | 
|  |  | if (!valid) return | 
|  |  | edit(this.addForm).then((response) => { | 
|  |  | // console.log(row) | 
|  |  | const res = response.data | 
|  |  | if (res.code != '200') { | 
|  |  | return this.$message.error(res.msg) | 
|  |  | } | 
|  |  | this.$message.success(res.msg) | 
|  |  | // 隐藏对话框 | 
|  |  | this.apply_dialog = false | 
|  |  | // 刷新列表 | 
|  |  | this.getList() | 
|  |  | }).catch(error => { | 
|  |  | this.$message.error(error.toString()) | 
|  |  | }) | 
|  |  | }) | 
|  |  | }, | 
|  |  | // 删除 | 
|  |  | applyDel(row) { | 
|  |  | // 弹框询问是否删除? | 
|  |  | this.$confirm('此操作永久删除该消息收发记录, 是否继续?', '警告', { | 
|  |  | confirmButtonText: '确定删除', | 
|  |  | cancelButtonText: '取消', | 
|  |  | type: 'warning' | 
|  |  | } | 
|  |  | ).then(() => { | 
|  |  | remove(row).then((response) => { | 
|  |  | // console.log(row) | 
|  |  | const res = response.data | 
|  |  | this.$message.success(res.msg) | 
|  |  | this.getList() | 
|  |  | }).catch(error => { | 
|  |  | this.$message.error(error) | 
|  |  | }) | 
|  |  | }).catch(() => { | 
|  |  | }) | 
|  |  | }, | 
|  |  | }, | 
|  |  | mounted() { | 
|  |  | this.getList(); | 
|  |  | // this.getYardList(); | 
|  |  |  | 
|  |  | } | 
|  |  |  | 
|  |  | } | 
|  |  | </script> | 
|  |  |  | 
|  |  | <style scoped> | 
|  |  | .toolbar{ | 
|  |  | height: 60px; | 
|  |  | background-color: white; | 
|  |  | /*line-height: 60px;*/ | 
|  |  | vertical-align: middle; | 
|  |  | border-radius: 5px 5px 5px 5px; | 
|  |  | padding: 15px 0 0 20px; | 
|  |  | box-shadow: 0px 5px 5px #e5e8eb; | 
|  |  | } | 
|  |  | .my-text-area .prepand{ | 
|  |  | float: left; | 
|  |  | width:89px; | 
|  |  | height: 28px; | 
|  |  | font-size: 12px; | 
|  |  | line-height: 28px; | 
|  |  | } | 
|  |  | </style> | 
|  |  | <style> | 
|  |  | .my-text-area .el-textarea__inner{ | 
|  |  | min-height: 28px; | 
|  |  | height: 28px; | 
|  |  | border-bottom-left-radius: 0; | 
|  |  | border-top-left-radius: 0; | 
|  |  | } | 
|  |  | </style> | 
|  |  |  | 
... | ... |  |