朱兆平 / vue_cli · 提交

转到一个项目

作者 小范
提交 835f3b8921c38fe3cb20da77f686e2c88ff3aeb1 1 个父辈 dbe80926

账单列表界面完善

内嵌 并排对比
正在显示 2 个修改的文件 包含 463 行增加 和 3 行删除
  1 +import http from "../http";
  2 +import axios from "axios";
  3 +
  4 +
  5 +let baseUrl = 'wlpt-custom-service-charge/bill'
  6 +
  7 +
  8 +//折扣配置
  9 +export const list = params => { return axios.get(`${baseUrl}/list`, params); };
  10 +export const save = params => { return axios.post(`${baseUrl}/save`, params); };
  11 +export const edit = params => { return axios.put(`${baseUrl}/edit`, params); };
  12 +export const remove = params => { return axios.delete(`${baseUrl}/remove`, {params:params}); };
1 <template> 1 <template>
2 - 2 + <el-row>
  3 + <el-card style="background-color: #F5F7FA">
  4 + <!-- 搜索区域-->
  5 + <el-row class="toolbar">
  6 + <!-- <el-col :span="5">-->
  7 + <!-- <el-input v-model="queryInfo.companyId" prefix-icon="el-icon-search" size="small" style="width: 240px"-->
  8 + <!-- placeholder="公司ID" clearable>-->
  9 + <!-- <template slot="prepend">公司ID</template>-->
  10 + <!-- </el-input>-->
  11 + <!-- </el-col>-->
  12 + <!-- <el-col :span="5">-->
  13 + <!-- <el-input v-model="queryInfo.busnessType" prefix-icon="el-icon-search" size="small" style="width: 240px"-->
  14 + <!-- placeholder="业务类型" clearable>-->
  15 + <!-- <template slot="prepend">业务类型</template>-->
  16 + <!-- </el-input>-->
  17 + <!-- </el-col>-->
  18 + <!-- <el-col :span="5">-->
  19 + <!-- <div class="my-text-area">-->
  20 + <!-- <div class="el-input-group__prepend prepand">生效状态</div>-->
  21 + <!-- <el-select v-model="queryInfo.state" placeholder="生效状态" size="small" style="width: 140px">-->
  22 + <!-- <el-option label="生效" value="Y"></el-option>-->
  23 + <!-- <el-option label="失效" value="N"></el-option>-->
  24 + <!-- </el-select>-->
  25 + <!-- </div>-->
  26 + <!-- </el-col>-->
  27 + <el-col :span="5">
  28 + <el-button type="primary" icon="el-icon-search" size="small" @click="getList()">
  29 + 查询
  30 + </el-button>
  31 +<!-- <el-button type="success" icon="el-icon-edit" size="small" @click="applyAdd()">新增</el-button>-->
  32 + </el-col>
  33 + </el-row>
  34 + <!-- 列表区域-->
  35 + <el-row>
  36 + <template>
  37 + <el-table
  38 + :data="tableData"
  39 + border
  40 + :cell-style="{textAlign:'center'}"
  41 + style="border-radius: 10px 10px 0px 0px;line-height: 25px"
  42 + :header-cell-style="{background:'#6F8294',color:'#FFFFFF'}" size="small"
  43 + >
  44 + <el-table-column
  45 + fixed
  46 + prop="billWaybiilno"
  47 + label="关联单据/运单号"
  48 + width="120">
  49 + </el-table-column>
  50 + <el-table-column
  51 + prop="billName"
  52 + label="费用名称"
  53 + width="80">
  54 + </el-table-column>
  55 + <el-table-column
  56 + prop="billState"
  57 + label="费用状态"
  58 + width="80">
  59 + <template slot-scope="scope">
  60 + <span v-if="scope.row.billState ==='000'">未支付</span>
  61 + <span v-if="scope.row.billState ==='001'">已支付</span>
  62 + <span v-if="scope.row.billState ==='111'">作废</span>
  63 + </template>
  64 + </el-table-column>
  65 + <el-table-column
  66 + prop="billPayModel"
  67 + label="结算方式"
  68 + width="80">
  69 + <template slot-scope="scope">
  70 + <span v-if="scope.row.billPayModel ==='000'">记账</span>
  71 + <span v-if="scope.row.billPayModel ==='001'">月结</span>
  72 + <span v-if="scope.row.billPayModel ==='002'">现金</span>
  73 + </template>
  74 + </el-table-column>
  75 + <el-table-column
  76 + prop="billIeType"
  77 + label="支出/收入"
  78 + width="80">
  79 + <template slot-scope="scope">
  80 + <span v-if="scope.row.billIeType ==='I'">收入</span>
  81 + <span v-if="scope.row.billIeType ==='E'">支出</span>
  82 + </template>
  83 + </el-table-column>
  84 + <el-table-column
  85 + prop="billBusinessName"
  86 + label="费用所属业务类型"
  87 + width="120">
  88 + </el-table-column>
  89 + <el-table-column
  90 + prop="billCosts"
  91 + label="最终费用额度"
  92 + width="100">
  93 + </el-table-column>
  94 + <el-table-column
  95 + prop="billCostsBefore"
  96 + label="费用优惠前额度"
  97 + width="110">
  98 + </el-table-column>
  99 + <el-table-column
  100 + prop="billCostsDiscounts"
  101 + label="优惠金额"
  102 + width="80">
  103 + </el-table-column>
  104 + <el-table-column
  105 + prop="billCurrency"
  106 + label="计费单位"
  107 + width="80">
  108 + </el-table-column>
  109 + <el-table-column
  110 + prop="billSource"
  111 + label="费用产生来源"
  112 + width="160">
  113 + </el-table-column>
  114 + <el-table-column
  115 + fixed="right"
  116 + label="操作"
  117 + width="160">
  118 + <template slot-scope="scope">
  119 + <el-button type="success" size="mini" @click="applyEdit(scope.row)">编辑</el-button>
  120 + <el-button type="danger" size="mini" @click="applyDel(scope.row)">删除</el-button>
  121 + </template>
  122 + </el-table-column>
  123 + </el-table>
  124 + </template>
  125 + </el-row>
  126 + <el-row style="margin-top: 10px" class="toolbar">
  127 + <el-pagination
  128 + @size-change="handleSizeChange"
  129 + @current-change="handleCurrentChange"
  130 + :current-page="queryInfo.limitSize"
  131 + :page-size="queryInfo.pageSize"
  132 + :page-sizes="[10, 50, 100, 500]"
  133 + layout="total, sizes, prev, pager, next, jumper"
  134 + :total="total">
  135 + </el-pagination>
  136 + </el-row>
  137 + <el-row>
  138 + <el-dialog :title="dialogMap[dialogApply]" :visible.sync="apply_dialog" width="70%" >
  139 + <el-form :model="addForm" :rules="rules" ref="addForm" style="margin-top: 40px">
  140 + <el-row>
  141 + <el-col :span="11">
  142 + <el-form-item label=" " :label-width="formLabelWidth" prop="billWaybiilno">
  143 + <el-input v-model="addForm.billWaybiilno" autocomplete="off" size="small" style="width: 350px">
  144 + <template slot="prepend">关联单据/运单号</template>
  145 + </el-input>
  146 + </el-form-item>
  147 + </el-col>
  148 + <el-col :span="12">
  149 + <el-form-item label=" " :label-width="formLabelWidth" prop="billName">
  150 + <el-input v-model="addForm.billName" autocomplete="off" size="small" style="width: 350px">
  151 + <template slot="prepend">费用名称</template>
  152 + </el-input>
  153 + </el-form-item>
  154 + </el-col>
  155 + </el-row>
  156 + <el-row>
  157 + <el-col :span="11">
  158 + <el-form-item label=" " :label-width="formLabelWidth" prop="billState">
  159 + <div class="my-text-area">
  160 + <div class="el-input-group__prepend prepand">费用状态</div>
  161 + <el-select v-model="addForm.billState" placeholder="请选择费用状态" size="small" style="width: 260px">
  162 + <el-option label="未支付" value="000"></el-option>
  163 + <el-option label="已支付" value="001"></el-option>
  164 + <el-option label="作废" value="111"></el-option>
  165 + </el-select>
  166 + </div>
  167 + </el-form-item>
  168 + </el-col>
  169 + <el-col :span="12">
  170 + <el-form-item label=" " :label-width="formLabelWidth" prop="billPayModel">
  171 + <div class="my-text-area">
  172 + <div class="el-input-group__prepend prepand">结算方式</div>
  173 + <el-select v-model="addForm.billPayModel" placeholder="请选择结算方式" size="small" style="width: 260px">
  174 + <el-option label="现金" value="002"></el-option>
  175 + <el-option label="记账" value="000"></el-option>
  176 + <el-option label="月结" value="001"></el-option>
  177 + </el-select>
  178 + </div>
  179 + </el-form-item>
  180 + </el-col>
  181 + </el-row>
  182 + <el-row>
  183 + <el-col :span="11">
  184 + <el-form-item label=" " :label-width="formLabelWidth" prop="billIeType">
  185 + <div class="my-text-area">
  186 + <div class="el-input-group__prepend prepand">支出/收入</div>
  187 + <el-select v-model="addForm.billIeType" placeholder="请选择支付方式" size="small" style="width: 260px">
  188 + <el-option label="收入" value="I"></el-option>
  189 + <el-option label="支出" value="E"></el-option>
  190 + </el-select>
  191 + </div>
  192 + </el-form-item>
  193 + </el-col>
  194 + <el-col :span="12">
  195 + <el-form-item label=" " :label-width="formLabelWidth" prop="billBusinessName">
  196 + <el-input v-model="addForm.billBusinessName" autocomplete="off" size="small" style="width: 350px">
  197 + <template slot="prepend">费用所属业务类型</template>
  198 + </el-input>
  199 + </el-form-item>
  200 + </el-col>
  201 + </el-row>
  202 + <el-row>
  203 + <el-col :span="11">
  204 + <el-form-item label=" " :label-width="formLabelWidth" prop="billCosts">
  205 + <el-input v-model="addForm.billCosts" autocomplete="off" size="small" style="width: 350px">
  206 + <template slot="prepend">最终费用额度</template>
  207 + </el-input>
  208 + </el-form-item>
  209 + </el-col>
  210 + <el-col :span="12">
  211 + <el-form-item label=" " :label-width="formLabelWidth" prop="billCostsBefore">
  212 + <el-input v-model="addForm.billCostsBefore" autocomplete="off" size="small" style="width: 350px">
  213 + <template slot="prepend">费用优惠前额度</template>
  214 + </el-input>
  215 + </el-form-item>
  216 + </el-col>
  217 + </el-row>
  218 + <el-row>
  219 + <el-col :span="11">
  220 + <el-form-item label=" " :label-width="formLabelWidth" prop="billCostsDiscounts">
  221 + <el-input v-model="addForm.billCostsDiscounts" autocomplete="off" size="small" style="width: 350px">
  222 + <template slot="prepend">优惠金额</template>
  223 + </el-input>
  224 + </el-form-item>
  225 + </el-col>
  226 + <el-col :span="12">
  227 + <el-form-item label=" " :label-width="formLabelWidth" prop="billCurrency">
  228 + <el-input v-model="addForm.billCurrency" autocomplete="off" size="small" style="width: 350px">
  229 + <template slot="prepend">计费单位</template>
  230 + </el-input>
  231 + </el-form-item>
  232 + </el-col>
  233 + </el-row>
  234 + <el-row>
  235 + <el-col :span="11">
  236 + <el-form-item label=" " :label-width="formLabelWidth" prop="billSource">
  237 + <el-input v-model="addForm.billSource" autocomplete="off" size="small" style="width: 350px">
  238 + <template slot="prepend">费用产生来源</template>
  239 + </el-input>
  240 + </el-form-item>
  241 + </el-col>
  242 + </el-row>
  243 + </el-form>
  244 + <div slot="footer" class="dialog-footer">
  245 + <el-button @click="apply_dialog = false" size="small">取 消</el-button>
  246 + <el-button type="primary" @click="dialogApply==='create'?add():edit()" size="small">提 交</el-button>
  247 + </div>
  248 + </el-dialog>
  249 + </el-row>
  250 + </el-card>
  251 + </el-row>
3 </template> 252 </template>
4 253
5 <script> 254 <script>
  255 + import {list,edit,remove} from '../../api/consigner/check';
  256 +
6 export default { 257 export default {
7 - name: "check" 258 + name: "check",
  259 + data() {
  260 + return {
  261 + queryInfo: {
  262 + // companyId:'',
  263 + // busnessType:'',
  264 + // state:'',
  265 + // 当前页数
  266 + limitSize: 1,
  267 + // 每页大小
  268 + pageSize: 10,
  269 + },
  270 + total: 0,
  271 + tableData:[],
  272 + dialogMap: {
  273 + update: '编辑',
  274 + create: '新增'
  275 + },
  276 + dis: undefined,
  277 + dialogApply: 'create',
  278 + apply_dialog: false,
  279 + addForm: {
  280 + billWaybiilno: '',
  281 + billName: '',
  282 + billState: '',
  283 + billPayModel: '',
  284 + billIeType: '',
  285 + billBusinessName: '',
  286 + billCosts:'',
  287 + billCostsBefore:'',
  288 + billCostsDiscounts:'',
  289 + billCurrency: '',
  290 + billSource:'',
  291 + },
  292 + formLabelWidth: '120px',
  293 + rules: {
  294 + companyId: [
  295 + { required: true, message: '必填', trigger: 'change' }
  296 + ],
  297 + // needCount: [
  298 + // { required: true, message: '请输入需要车辆数量', trigger: 'blur' },
  299 + // ],
  300 + // orginStation: [
  301 + // { required: true, message: '请输入起始场站', trigger: 'blur' },
  302 + // ],
  303 + // endStation: [
  304 + // { required: true, message: '请输入目的场站', trigger: 'blur' },
  305 + // ],
  306 + },
  307 + }
  308 + },
  309 + methods: {
  310 + handleSizeChange(val) {
  311 + this.queryInfo.pageSize = val
  312 + this.getList()
  313 + },
  314 + handleCurrentChange(val) {
  315 + this.queryInfo.limitSize = val
  316 + this.getList()
  317 + },
  318 + getList() {
  319 + const _this = this
  320 + list(this.queryInfo).then((response) => {
  321 + const res = response.data
  322 + console.log(response.data)
  323 + if (res.code !== '200') {
  324 + return _this.$message.error('获取消息收发记录，失败！')
  325 + }
  326 + // 获取列表数据
  327 + _this.tableData = res.data.list
  328 + // 获取列表的总记录数
  329 + _this.total = res.data.total
  330 + _this.$message.success('获取消息收发记录，成功！')
  331 + }).catch(error => {
  332 + // 关闭加载
  333 + _this.$message.error(error.toString())
  334 + })
  335 + },
  336 + // 添加对话框，打开事件
  337 + // applyAdd() {
  338 + // this.addForm = {
  339 + // orderAuthorName: '',
  340 + // orderAuthorid: '',
  341 + // orderCreatTime: '',
  342 + // orderOperatorId: '',
  343 + // orderRemark: '',
  344 + // orderState: '',
  345 + // orderTotalAmount:'',
  346 + // orderUpdateTime:'',
  347 + // orderType:''
  348 + // };
  349 + // this.dialogApply= 'create';
  350 + // this.dis= 'create';
  351 + // this.apply_dialog = true;
  352 + // },
  353 + // 添加功能
  354 + // add() {
  355 + // this.$refs.addForm.validate(valid => {
  356 + // // 未通过，表单预校验
  357 + // if (!valid) return;
  358 + // save(this.addForm).then((response) => {
  359 + // let res = response.data;
  360 + // // 添加失败
  361 + // if (res.code !== '200') {
  362 + // return this.$message.error(res.msg);
  363 + // }
  364 + // // 添加，成功
  365 + // this.$message.success(res.msg);
  366 + // // 隐藏对话框
  367 + // this.apply_dialog = false;
  368 + // // 刷新列表
  369 + // this.getList();
  370 + // }).catch(error => {
  371 + // this.$message.error(error.toString());
  372 + // });
  373 + // })
  374 + // },
  375 +// 打开编辑
  376 + applyEdit(row) {
  377 + this.apply_dialog = true;
  378 + this.dialogApply = 'update';
  379 + this.dis= 'update';
  380 + this.addForm=row;
  381 + },
  382 + // 编辑功能
  383 + edit() {
  384 + // 进行表单的预验证
  385 + this.$refs.addForm.validate(valid => {
  386 + // 未通过，表单预校验
  387 + if (!valid) return
  388 + edit(this.addForm).then((response) => {
  389 + // console.log(row)
  390 + const res = response.data
  391 + if (res.code != '200') {
  392 + return this.$message.error(res.msg)
  393 + }
  394 + this.$message.success(res.msg)
  395 + // 隐藏对话框
  396 + this.apply_dialog = false
  397 + // 刷新列表
  398 + this.getList()
  399 + }).catch(error => {
  400 + this.$message.error(error.toString())
  401 + })
  402 + })
  403 + },
  404 + // 删除
  405 + applyDel(row) {
  406 + // 弹框询问是否删除？
  407 + this.$confirm('此操作永久删除该消息收发记录, 是否继续?', '警告', {
  408 + confirmButtonText: '确定删除',
  409 + cancelButtonText: '取消',
  410 + type: 'warning'
  411 + }
  412 + ).then(() => {
  413 + // console.log(row);
  414 + remove(row).then((response) => {
  415 + // console.log(row)
  416 + const res = response.data
  417 + this.$message.success(res.msg)
  418 + this.getList()
  419 + }).catch(error => {
  420 + this.$message.error(error)
  421 + })
  422 + }).catch(() => {
  423 + })
  424 + },
  425 + },
  426 + mounted() {
  427 + this.getList();
  428 + // this.getYardList();
  429 +
  430 + }
  431 +
8 } 432 }
9 </script> 433 </script>
10 434
11 <style scoped> 435 <style scoped>
12 - 436 + .toolbar{
  437 + height: 60px;
  438 + background-color: white;
  439 + /*line-height: 60px;*/
  440 + vertical-align: middle;
  441 + border-radius: 5px 5px 5px 5px;
  442 + padding: 15px 0 0 20px;
  443 + box-shadow: 0px 5px 5px #e5e8eb;
  444 + }
  445 + .my-text-area .prepand{
  446 + float: left;
  447 + width:89px;
  448 + height: 28px;
  449 + font-size: 12px;
  450 + line-height: 28px;
  451 + }
13 </style> 452 </style>
  453 +<style>
  454 + .my-text-area .el-textarea__inner{
  455 + min-height: 28px;
  456 + height: 28px;
  457 + border-bottom-left-radius: 0;
  458 + border-top-left-radius: 0;
  459 + }
  460 +</style>
  461 +