Commit ea9c38ec authored by 纪泽龙's avatar 纪泽龙

新分支

parent aeea6d6b
...@@ -4,236 +4,323 @@ ...@@ -4,236 +4,323 @@
*/ */
/** 基础通用 **/ /** 基础通用 **/
.pt5 { .pt5 {
padding-top: 5px; padding-top: 5px;
} }
.pr5 {
padding-right: 5px; .pr5 {
} padding-right: 5px;
.pb5 { }
padding-bottom: 5px;
} .pb5 {
.mt5 { padding-bottom: 5px;
margin-top: 5px; }
}
.mr5 { .mt5 {
margin-right: 5px; margin-top: 5px;
} }
.mb5 {
margin-bottom: 5px; .mr5 {
} margin-right: 5px;
.mb8 { }
margin-bottom: 8px;
} .mb5 {
.ml5 { margin-bottom: 5px;
margin-left: 5px; }
}
.mt10 { .mb8 {
margin-top: 10px; margin-bottom: 8px;
} }
.mr10 {
margin-right: 10px; .ml5 {
} margin-left: 5px;
.mb10 { }
margin-bottom: 10px;
} .mt10 {
.ml0 { margin-top: 10px;
margin-left: 10px; }
}
.mt20 { .mr10 {
margin-top: 20px; margin-right: 10px;
} }
.mr20 {
margin-right: 20px; .mb10 {
} margin-bottom: 10px;
.mb20 { }
margin-bottom: 20px;
} .ml0 {
.m20 { margin-left: 10px;
margin-left: 20px; }
}
.mt20 {
.el-dialog:not(.is-fullscreen){ margin-top: 20px;
margin-top: 6vh !important; }
}
.mr20 {
.el-table { margin-right: 20px;
.el-table__header-wrapper, .el-table__fixed-header-wrapper { }
th {
word-break: break-word; .mb20 {
background-color: #f8f8f9; margin-bottom: 20px;
color: #515a6e; }
height: 40px;
font-size: 13px; .m20 {
} margin-left: 20px;
} }
.el-table__body-wrapper {
.el-button [class*="el-icon-"] + span { .el-dialog:not(.is-fullscreen) {
margin-left: 1px; margin-top: 6vh !important;
} }
.el-table {
.el-table__header-wrapper,
.el-table__fixed-header-wrapper {
th {
word-break: break-word;
background-color: #f8f8f9;
color: #515a6e;
height: 40px;
font-size: 13px;
}
}
.el-table__body-wrapper {
.el-button [class*="el-icon-"]+span {
margin-left: 1px;
}
}
}
/** 表单布局 **/
.form-header {
font-size: 15px;
color: #6379bb;
border-bottom: 1px solid #ddd;
margin: 8px 10px 25px 10px;
padding-bottom: 5px
}
/** 表格布局 **/
.pagination-container {
position: relative;
height: 25px;
margin-bottom: 10px;
margin-top: 15px;
padding: 10px 20px !important;
}
/* tree border */
.tree-border {
margin-top: 5px;
border: 1px solid #e5e6e7;
background: #FFFFFF none;
border-radius: 4px;
}
.pagination-container .el-pagination {
right: 0;
position: absolute;
}
.el-table .fixed-width .el-button--mini {
padding-left: 0;
padding-right: 0;
width: inherit;
}
.el-tree-node__content>.el-checkbox {
margin-right: 8px;
}
.list-group-striped>.list-group-item {
border-left: 0;
border-right: 0;
border-radius: 0;
padding-left: 0;
padding-right: 0;
}
.list-group {
padding-left: 0px;
list-style: none;
}
.list-group-item {
border-bottom: 1px solid #e7eaec;
border-top: 1px solid #e7eaec;
margin-bottom: -1px;
padding: 11px 0px;
font-size: 13px;
}
.pull-right {
float: right !important;
}
.el-card__header {
padding: 14px 15px 7px;
min-height: 40px;
}
.el-card__body {
padding: 15px 20px 20px 20px;
}
.card-box {
padding-right: 15px;
padding-left: 15px;
margin-bottom: 10px;
}
/* button color */
.el-button--cyan.is-active,
.el-button--cyan:active {
background: #20B2AA;
border-color: #20B2AA;
color: #FFFFFF;
}
.el-button--cyan:focus,
.el-button--cyan:hover {
background: #48D1CC;
border-color: #48D1CC;
color: #FFFFFF;
}
.el-button--cyan {
background-color: #20B2AA;
border-color: #20B2AA;
color: #FFFFFF;
}
/* text color */
.text-navy {
color: #1ab394;
}
.text-primary {
color: inherit;
}
.text-success {
color: #1c84c6;
}
.text-info {
color: #23c6c8;
}
.text-warning {
color: #f8ac59;
}
.text-danger {
color: #ed5565;
}
.text-muted {
color: #888888;
}
/* image */
.img-circle {
border-radius: 50%;
}
.img-lg {
width: 120px;
height: 120px;
}
.avatar-upload-preview {
position: absolute;
top: 50%;
transform: translate(50%, -50%);
width: 200px;
height: 200px;
border-radius: 50%;
box-shadow: 0 0 4px #ccc;
overflow: hidden;
}
/* 拖拽列样式 */
.sortable-ghost {
opacity: .8;
color: #fff !important;
background: #42b983 !important;
}
.top-right-btn {
position: relative;
float: right;
}
// dialog
.el-dialog {
padding: 0 20px !important;
border-radius: 25px;
}
.el-dialog__headerbtn {
right: 0 !important;
}
.el-dialog__header {
border: 1px solid rgba(222, 222, 222, 0.53);
position: relative;
padding: 15px 0 10px !important;
// &:before {
// content: "";
// width: 16px;
// height: 3px;
// position: absolute;
// background-color: $--color-primary;
// left: 0;
// bottom: -2px;
// }
// &:after {
// content: "";
// width: 16px;
// height: 3px;
// position: absolute;
// background-color: $--color-primary;
// right: 0;
// bottom: -2px;
// }
.el-dialog__title {
font-size: 16px;
color: #333333;
}
}
.el-dialog__body {
padding: 30px 0 !important;
}
.el-table {
& tr:nth-child(2n) {
background: rgba(249, 249, 249, 0.8);
}
&::before{
content: "";
position: absolute;
background-color: #e6ebf5;
z-index: 1;
display: none;
} }
} }
/** 表单布局 **/ .el-table th.el-table__cell.is-leaf,
.form-header { .el-table td.el-table__cell {
font-size:15px; border: none;
color:#6379bb;
border-bottom:1px solid #ddd; }
margin:8px 10px 25px 10px;
padding-bottom:5px .flex{
} display: flex;
}
/** 表格布局 **/ \ No newline at end of file
.pagination-container {
position: relative;
height: 25px;
margin-bottom: 10px;
margin-top: 15px;
padding: 10px 20px !important;
}
/* tree border */
.tree-border {
margin-top: 5px;
border: 1px solid #e5e6e7;
background: #FFFFFF none;
border-radius:4px;
}
.pagination-container .el-pagination {
right: 0;
position: absolute;
}
.el-table .fixed-width .el-button--mini {
padding-left: 0;
padding-right: 0;
width: inherit;
}
.el-tree-node__content > .el-checkbox {
margin-right: 8px;
}
.list-group-striped > .list-group-item {
border-left: 0;
border-right: 0;
border-radius: 0;
padding-left: 0;
padding-right: 0;
}
.list-group {
padding-left: 0px;
list-style: none;
}
.list-group-item {
border-bottom: 1px solid #e7eaec;
border-top: 1px solid #e7eaec;
margin-bottom: -1px;
padding: 11px 0px;
font-size: 13px;
}
.pull-right {
float: right !important;
}
.el-card__header {
padding: 14px 15px 7px;
min-height: 40px;
}
.el-card__body {
padding: 15px 20px 20px 20px;
}
.card-box {
padding-right: 15px;
padding-left: 15px;
margin-bottom: 10px;
}
/* button color */
.el-button--cyan.is-active,
.el-button--cyan:active {
background: #20B2AA;
border-color: #20B2AA;
color: #FFFFFF;
}
.el-button--cyan:focus,
.el-button--cyan:hover {
background: #48D1CC;
border-color: #48D1CC;
color: #FFFFFF;
}
.el-button--cyan {
background-color: #20B2AA;
border-color: #20B2AA;
color: #FFFFFF;
}
/* text color */
.text-navy {
color: #1ab394;
}
.text-primary {
color: inherit;
}
.text-success {
color: #1c84c6;
}
.text-info {
color: #23c6c8;
}
.text-warning {
color: #f8ac59;
}
.text-danger {
color: #ed5565;
}
.text-muted {
color: #888888;
}
/* image */
.img-circle {
border-radius: 50%;
}
.img-lg {
width: 120px;
height: 120px;
}
.avatar-upload-preview {
position: absolute;
top: 50%;
transform: translate(50%, -50%);
width: 200px;
height: 200px;
border-radius: 50%;
box-shadow: 0 0 4px #ccc;
overflow: hidden;
}
/* 拖拽列样式 */
.sortable-ghost{
opacity: .8;
color: #fff!important;
background: #42b983!important;
}
.top-right-btn {
position: relative;
float: right;
}
<template> <template>
<div :class="{'hidden':hidden}" class="pagination-container"> <div :class="{ hidden: hidden }" class="pagination-container flex">
<el-pagination <div class="flex">
:background="background" <div
:current-page.sync="currentPage" class="myBtn"
:page-size.sync="pageSize" :class="{ active: active===index }"
:layout="layout" v-for="item,index in pageSizes"
:page-sizes="pageSizes" :key="item"
:total="total" @click="handleSizeChange(index)"
v-bind="$attrs" >
@size-change="handleSizeChange" {{ item }}
@current-change="handleCurrentChange" </div>
/> </div>
<div>
<el-pagination
:background="background"
:current-page.sync="currentPage"
:page-size.sync="pageSize"
:layout="layout"
:page-sizes="pageSizes"
:total="total"
v-bind="$attrs"
@current-change="handleCurrentChange"
/>
<!-- @size-change="handleSizeChange" -->
</div>
</div> </div>
</template> </template>
<script> <script>
import { scrollTo } from '@/utils/scroll-to' import { scrollTo } from "@/utils/scroll-to";
export default { export default {
name: 'Pagination', name: "Pagination",
props: { props: {
total: { total: {
required: true, required: true,
type: Number type: Number,
}, },
page: { page: {
type: Number, type: Number,
default: 1 default: 1,
}, },
limit: { limit: {
type: Number, type: Number,
default: 20 default: 20,
}, },
pageSizes: { pageSizes: {
type: Array, type: Array,
default() { default() {
return [10, 20, 30, 50] return [10, 20, 30, 50];
} },
}, },
layout: { layout: {
type: String, type: String,
default: 'total, sizes, prev, pager, next, jumper' // default: 'total, sizes, prev, pager, next, jumper'
default: "prev, pager, next",
}, },
background: { background: {
type: Boolean, type: Boolean,
default: true default: false,
}, },
autoScroll: { autoScroll: {
type: Boolean, type: Boolean,
default: true default: true,
}, },
hidden: { hidden: {
type: Boolean, type: Boolean,
default: false default: false,
} },
},
data() {
return {active:0};
}, },
computed: { computed: {
currentPage: { currentPage: {
get() { get() {
return this.page return this.page;
}, },
set(val) { set(val) {
this.$emit('update:page', val) this.$emit("update:page", val);
} },
}, },
pageSize: { pageSize: {
get() { get() {
return this.limit return this.limit;
}, },
set(val) { set(val) {
this.$emit('update:limit', val) this.$emit("update:limit", val);
} },
} },
}, },
methods: { methods: {
handleSizeChange(val) { handleSizeChange(val) {
this.$emit('pagination', { page: this.currentPage, limit: val }) this.active =val;
this.$emit("pagination", { page: this.currentPage, limit: this.pageSizes[val] });
if (this.autoScroll) { if (this.autoScroll) {
scrollTo(0, 800) scrollTo(0, 800);
} }
}, },
handleCurrentChange(val) { handleCurrentChange(val) {
this.$emit('pagination', { page: val, limit: this.pageSize }) this.$emit("pagination", { page: val, limit: this.pageSizes[active] });
if (this.autoScroll) { if (this.autoScroll) {
scrollTo(0, 800) scrollTo(0, 800);
} }
} },
} },
} };
</script> </script>
<style scoped> <style lang="scss" scoped>
.pagination-container { .pagination-container {
background: #fff; background: #fff;
padding: 32px 16px; padding: 10px 0px !important;
justify-content: space-between;
} }
.pagination-container.hidden { .pagination-container.hidden {
display: none; display: none;
} }
.myBtn {
width: 42px;
height: 29px;
border-radius: 8px;
color: #727a84;
text-align: center;
line-height: 29px;
font-size: 14px;
margin-right: 10px;
cursor: pointer;
&:hover{
background: rgba(0, 122, 255,.5)
}
&.active {
background: #007aff;
color:#fff
}
}
</style> </style>
<template> <template>
<div> <div>
<el-table v-loading="loading" :data="projectList"> <el-table v-loading="loading" :data="projectList">
<el-table-column label="交易项目" align="center" prop="relationTransactionProjectId" :formatter="transactionProjectName" :show-overflow-tooltip="true"/> <el-table-column
<el-table-column label="交易状态" align="center" prop="tradeStatus" :formatter="getTradeStatus" :show-overflow-tooltip="true"/> label="交易项目"
<el-table-column label="申请人" align="center" prop="applyName" /> align="center"
<el-table-column label="卖方" align="center" prop="applyDeptName" :show-overflow-tooltip="true"/> prop="relationTransactionProjectId"
<el-table-column label="申报总价" align="center" prop="tradeTotal" /> :formatter="transactionProjectName"
<el-table-column label="买方" align="center" prop="tradeDeptName" :show-overflow-tooltip="true"/> :show-overflow-tooltip="true"
<el-table-column label="交易评分" align="center" prop="tradeScore" />
<el-table-column label="交易成交价" align="center" prop="dealPrice" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
v-if="scope.row.tradeStatus=='0' || scope.row.tradeStatus=='4'"
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['system:project:edit']"
>修改</el-button>
<el-button
v-if="scope.row.tradeStatus=='0' || scope.row.tradeStatus=='4'"
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['system:project:remove']"
>删除</el-button>
<OperatorButton v-for="item in scope.row.operators"
:operatorName="item"
:tradeInfo="scope.row"
@getList="getList"/>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/> />
</div> <el-table-column
label="交易状态"
align="center"
prop="tradeStatus"
:formatter="getTradeStatus"
:show-overflow-tooltip="true"
/>
<el-table-column label="申请人" align="center" prop="applyName" />
<el-table-column
label="卖方"
align="center"
prop="applyDeptName"
:show-overflow-tooltip="true"
/>
<el-table-column label="申报总价" align="center" prop="tradeTotal" />
<el-table-column
label="买方"
align="center"
prop="tradeDeptName"
:show-overflow-tooltip="true"
/>
<el-table-column label="交易评分" align="center" prop="tradeScore" />
<el-table-column label="交易成交价" align="center" prop="dealPrice" />
<el-table-column
label="操作"
align="center"
class-name="small-padding fixed-width"
>
<template slot-scope="scope">
<el-button
v-if="scope.row.tradeStatus == '0' || scope.row.tradeStatus == '4'"
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['system:project:edit']"
>修改</el-button
>
<el-button
v-if="scope.row.tradeStatus == '0' || scope.row.tradeStatus == '4'"
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['system:project:remove']"
>删除</el-button
>
<OperatorButton
v-for="item in scope.row.operators"
:key="item"
:operatorName="item"
:tradeInfo="scope.row"
@getList="getList"
/>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
</div>
</template> </template>
<script> <script>
import OperatorButton from "./OperatorButton"; import OperatorButton from "./OperatorButton";
export default { export default {
name: "table-list", name: "table-list",
props:{ props: {
projectList:{ projectList: {
type: Array type: Array,
}, },
queryParams:{ queryParams: {
type: Object type: Object,
}, },
total:{ total: {
type: Number type: Number,
},
loading:{
type: Boolean
}
}, },
components:{ loading: {
OperatorButton type: Boolean,
}, },
methods:{ },
getList(){ components: {
this.$emit("getList"); OperatorButton,
}, },
//获取项目名称 methods: {
transactionProjectName(row){ getList(value) {
let project = this.$parent.$parent.transactionProjects.find(item => item.transactionProjectId == row.relationTransactionProjectId); console.log(value)
if(project){ this.$emit("getList",value);
return project.transactionProjectName; },
} //获取项目名称
return "-"; transactionProjectName(row) {
}, let project = this.$parent.$parent.transactionProjects.find(
//获取交易状态 (item) => item.transactionProjectId == row.relationTransactionProjectId
getTradeStatus(row){ );
return this.selectDictLabel(this.$parent.$parent.transactionProjectStatus, row.tradeStatus); if (project) {
}, return project.transactionProjectName;
handleUpdate(row){
this.$parent.$parent.handleUpdate(row);
},
handleDelete(row){
this.$parent.$parent.handleDelete(row);
} }
} return "-";
} },
//获取交易状态
getTradeStatus(row) {
return this.selectDictLabel(
this.$parent.$parent.transactionProjectStatus,
row.tradeStatus
);
},
handleUpdate(row) {
this.$parent.$parent.handleUpdate(row);
},
handleDelete(row) {
this.$parent.$parent.handleDelete(row);
},
},
};
</script> </script>
<style scoped> <style scoped></style>
</style>
<template> <template>
<div class="app-container"> <div class="app-container">
<el-form :model="queryParams" size="mini" ref="queryForm" :inline="true" v-show="showSearch" label-width="100px"> <el-form
:model="queryParams"
size="mini"
ref="queryForm"
:inline="true"
v-show="showSearch"
label-width="100px"
>
<el-form-item label="交易项目" prop="relationTransactionProjectId"> <el-form-item label="交易项目" prop="relationTransactionProjectId">
<el-select v-model="queryParams.relationTransactionProjectId" placeholder="请选择交易项目"> <el-select
<el-option v-for="item in transactionProjects" v-model="queryParams.relationTransactionProjectId"
:key="item.transactionProjectId" placeholder="请选择交易项目"
:label="item.transactionProjectName" >
:value="item.transactionProjectId"/> <el-option
v-for="item in transactionProjects"
:key="item.transactionProjectId"
:label="item.transactionProjectName"
:value="item.transactionProjectId"
/>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="项目状态" prop="tradeStatus"> <el-form-item label="项目状态" prop="tradeStatus">
<el-select v-model="queryParams.tradeStatus" placeholder="请选择项目状态" clearable size="small"> <el-select
<el-option v-for="item in transactionProjectStatus" v-model="queryParams.tradeStatus"
:key="item.dictValue" placeholder="请选择项目状态"
:label="item.dictLabel" clearable
:value="item.dictValue" size="small"
>
<el-option
v-for="item in transactionProjectStatus"
:key="item.dictValue"
:label="item.dictLabel"
:value="item.dictValue"
/> />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="卖方部门" prop="applyDeptId"> <el-form-item label="卖方部门" prop="applyDeptId">
<div style="width: 160px"> <div style="width: 160px">
<treeselect v-model="queryParams.applyDeptId" :options="deptOptions" :show-count="true" placeholder="请选择卖方部门" /> <treeselect
v-model="queryParams.applyDeptId"
:options="deptOptions"
:show-count="true"
placeholder="请选择卖方部门"
/>
</div> </div>
</el-form-item> </el-form-item>
<el-form-item label="买方部门" prop="tradeDeptId"> <el-form-item label="买方部门" prop="tradeDeptId">
<div style="width: 160px"> <div style="width: 160px">
<treeselect v-model="queryParams.tradeDeptId" :options="deptOptions" :show-count="true" placeholder="请选择买方部门" /> <treeselect
v-model="queryParams.tradeDeptId"
:options="deptOptions"
:show-count="true"
placeholder="请选择买方部门"
/>
</div> </div>
</el-form-item> </el-form-item>
...@@ -35,13 +63,22 @@ ...@@ -35,13 +63,22 @@
<el-date-picker <el-date-picker
v-model="queryParams.createTime" v-model="queryParams.createTime"
type="datetime" type="datetime"
placeholder="选择日期"> placeholder="选择日期"
>
</el-date-picker> </el-date-picker>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button> <el-button
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button> type="primary"
icon="el-icon-search"
size="mini"
@click="handleQuery"
>搜索</el-button
>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
>重置</el-button
>
</el-form-item> </el-form-item>
</el-form> </el-form>
...@@ -96,96 +133,146 @@ ...@@ -96,96 +133,146 @@
<div class="outer-div"> <div class="outer-div">
<header class="header"> <header class="header">
<ul class="tab-tilte"> <ul class="tab-tilte">
<li :class="{ active: tab == 0 }" @click="changeTab(0)">所有项目</li> <li :class="{ active: tab == 0 }" @click="changeTab(0)">
<li :class="{ active: tab == 1 }" @click="changeTab(1)">我申请的</li> 所有项目
<li :class="{ active: tab == 2 }" @click="changeTab(2)">我审批的</li> </li>
<li :class="{ active: tab == 1 }" @click="changeTab(1)">
我申请的
</li>
<li :class="{ active: tab == 2 }" @click="changeTab(2)">
我审批的
</li>
</ul> </ul>
<el-button <el-button
@click="handleAdd" @click="handleAdd"
v-hasPermi="['system:project:add']" v-hasPermi="['system:project:add']"
class="applyService" class="applyService"
>申请服务</el-button> >申请服务</el-button
>
</header> </header>
<div class="tab-content"> <div class="tab-content">
<!-- 可以使用自定义组件 --> <!-- 可以使用自定义组件 -->
<!-- <component-one v-show="tab == 0"></component-one> <!-- <component-one v-show="tab == 0"></component-one>
<component-two v-show="tab == 1"></component-two> --> <component-two v-show="tab == 1"></component-two> -->
<div v-if="tab == 0"> <div v-if="tab == 0" :key="tab">
<TableList :queryParams="queryParams" <TableList
:projectList="projectList" :queryParams="queryParams"
:total="total" :projectList="projectList"
:loading="loading" :total="total"
@getList="getList"/> :loading="loading"
@getList="getList"
/>
</div> </div>
<div v-if="tab == 1"> <div v-if="tab == 1" :key="tab">
<TableList :queryParams="queryParams" <TableList
:projectList="projectList" :queryParams="queryParams"
:total="total" :projectList="projectList"
:loading="loading" :total="total"
@getList="getList"/> :loading="loading"
@getList="getList"
/>
</div> </div>
<div v-if="tab == 2"> <div v-if="tab == 2" :key="tab">
<TableList :queryParams="queryParams" <TableList
:projectList="projectList" :queryParams="queryParams"
:total="total" :projectList="projectList"
:loading="loading" :total="total"
@getList="getList"/> :loading="loading"
@getList="getList"
/>
</div> </div>
</div> </div>
</div> </div>
</el-card> </el-card>
<!-- 添加或修改交易项目对话框 --> <!-- 添加或修改交易项目对话框 -->
<el-dialog :title="title" :visible.sync="open" width="800px" append-to-body :close-on-click-modal="false" destroy-on-close> <el-dialog
:title="title"
:visible.sync="open"
width="800px"
append-to-body
:close-on-click-modal="false"
destroy-on-close
>
<el-form ref="form" :model="form" :rules="rules" label-width="100px"> <el-form ref="form" :model="form" :rules="rules" label-width="100px">
<el-row> <el-row>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="买方" prop="tradeDeptId"> <el-form-item label="买方" prop="tradeDeptId">
<treeselect v-model="form.tradeDeptId" :options="deptOptions" :show-count="true" placeholder="请选择部门"/> <treeselect
v-model="form.tradeDeptId"
:options="deptOptions"
:show-count="true"
placeholder="请选择部门"
/>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="交易项目" prop="relationTransactionProjectId"> <el-form-item label="交易项目" prop="relationTransactionProjectId">
<el-select v-model="form.relationTransactionProjectId" placeholder="请选择交易项目" style="width: 100%" @change="changeTransactionProject"> <el-select
<el-option v-for="item in transactionOptions" v-model="form.relationTransactionProjectId"
:key="item.transactionProjectId" placeholder="请选择交易项目"
:label="item.transactionProjectName" style="width: 100%"
:value="item.transactionProjectId"/> @change="changeTransactionProject"
>
<el-option
v-for="item in transactionOptions"
:key="item.transactionProjectId"
:label="item.transactionProjectName"
:value="item.transactionProjectId"
/>
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row> <el-row>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="买方经办人" prop="tradeTransactor"> <el-form-item label="买方经办人" prop="tradeTransactor">
<el-select v-model="form.tradeTransactor" placeholder="请选择买方经办人" style="width: 100%"> <el-select
<el-option v-for="item in transactorList" v-model="form.tradeTransactor"
:key="item.userId" placeholder="请选择买方经办人"
:label="item.nickName" style="width: 100%"
:value="item.userId"/> >
</el-select> <el-option
</el-form-item> v-for="item in transactorList"
</el-col> :key="item.userId"
<el-col :span="12"> :label="item.nickName"
<el-form-item label="单价" prop="tradePrice"> :value="item.userId"
<el-input v-model="form.tradePrice" placeholder="请输入单价" :disabled="priceType == '1'" @blur="sumAmount"/> />
</el-form-item> </el-select>
</el-col> </el-form-item>
</el-row> </el-col>
<el-col :span="12">
<el-form-item label="单价" prop="tradePrice">
<el-input
v-model="form.tradePrice"
placeholder="请输入单价"
:disabled="priceType == '1'"
@blur="sumAmount"
/>
</el-form-item>
</el-col>
</el-row>
<el-row> <el-row>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="数量" prop="tradeCount"> <el-form-item label="数量" prop="tradeCount">
<el-input v-model="form.tradeCount" placeholder="请输入交易数量" @blur="sumAmount"/> <el-input
</el-form-item> v-model="form.tradeCount"
</el-col> placeholder="请输入交易数量"
<el-col :span="12"> @blur="sumAmount"
<el-form-item label="总价" prop="tradeTotal"> />
<el-input v-model="form.tradeTotal" placeholder="请输入交易总价" /> </el-form-item>
</el-form-item> </el-col>
</el-col> <el-col :span="12">
</el-row> <el-form-item label="总价" prop="tradeTotal">
<el-input
v-model="form.tradeTotal"
placeholder="请输入交易总价"
/>
</el-form-item>
</el-col>
</el-row>
<el-form-item label="附件" prop="attachmentUrl"> <el-form-item label="附件" prop="attachmentUrl">
<FileUpload <FileUpload
listType="picture" listType="picture"
...@@ -193,20 +280,49 @@ ...@@ -193,20 +280,49 @@
@remove="listRemove" @remove="listRemove"
:fileArr="fileList" :fileArr="fileList"
:fileSize="500" :fileSize="500"
:fileType="['png', 'jpg', 'jpeg','mp4','doc', 'xls', 'ppt', 'txt','pdf']"/> :fileType="[
<el-input v-show="false" disabled v-model="form.attachmentUrl"></el-input> 'png',
'jpg',
'jpeg',
'mp4',
'doc',
'xls',
'ppt',
'txt',
'pdf',
]"
/>
<el-input
v-show="false"
disabled
v-model="form.attachmentUrl"
></el-input>
</el-form-item> </el-form-item>
</el-form> </el-form>
<div slot="footer" class="dialog-footer" style="text-align: center"> <div slot="footer" class="dialog-footer" style="text-align: center">
<el-button style="width: 150px;border-color: #1890ff;color: #1890ff;" @click="reset">内容重置</el-button> <el-button
<el-button type="primary" style="width: 150px" @click="submitForm">提交申请</el-button> style="width: 150px; border-color: #1890ff; color: #1890ff"
@click="reset"
>内容重置</el-button
>
<el-button type="primary" style="width: 150px" @click="submitForm"
>提交申请</el-button
>
</div> </div>
</el-dialog> </el-dialog>
</div> </div>
</template> </template>
<script> <script>
import { selectTTradeProjectListByRoles, listProject, getProject, delProject, addProject, updateProject, exportProject } from "@/api/transaction/tradeProject.js"; import {
selectTTradeProjectListByRoles,
listProject,
getProject,
delProject,
addProject,
updateProject,
exportProject,
} from "@/api/transaction/tradeProject.js";
import { getTransactionProjectList } from "@/api/transaction/project.js"; import { getTransactionProjectList } from "@/api/transaction/project.js";
import { treeselect } from "@/api/system/dept"; import { treeselect } from "@/api/system/dept";
import { selectTransactorByDeptId } from "@/api/system/user"; import { selectTransactorByDeptId } from "@/api/system/user";
...@@ -220,7 +336,7 @@ export default { ...@@ -220,7 +336,7 @@ export default {
components: { components: {
Treeselect, Treeselect,
FileUpload, FileUpload,
TableList TableList,
}, },
data() { data() {
return { return {
...@@ -260,23 +376,23 @@ export default { ...@@ -260,23 +376,23 @@ export default {
form: {}, form: {},
// 表单校验 // 表单校验
rules: { rules: {
relationTransactionProjectId:[ relationTransactionProjectId: [
{ required: true, message: "交易项目名称不能为空", trigger: "blur" } { required: true, message: "交易项目名称不能为空", trigger: "blur" },
], ],
tradeDeptId:[ tradeDeptId: [
{ required: true, message: "请选择买方部门", trigger: "change" } { required: true, message: "请选择买方部门", trigger: "change" },
], ],
tradeTransactor:[ tradeTransactor: [
{ required: true, message: "请选择买方经办人", trigger: "change" } { required: true, message: "请选择买方经办人", trigger: "change" },
], ],
tradePrice:[ tradePrice: [
{ required: true, message: "单价不能为空", trigger: "blur" } { required: true, message: "单价不能为空", trigger: "blur" },
], ],
tradeCount:[ tradeCount: [
{ required: true, message: "数量不能为空", trigger: "blur" } { required: true, message: "数量不能为空", trigger: "blur" },
], ],
tradeTotal:[ tradeTotal: [
{ required: true, message: "总价不能为空", trigger: "blur" } { required: true, message: "总价不能为空", trigger: "blur" },
], ],
}, },
transactionProjects: [], transactionProjects: [],
...@@ -284,33 +400,36 @@ export default { ...@@ -284,33 +400,36 @@ export default {
priceType: "", priceType: "",
fileList: [], fileList: [],
transactionProjectStatus: [], transactionProjectStatus: [],
tab:"0", tab: "0",
transactionOptions: [], transactionOptions: [],
transactorList: [] transactorList: [],
}; };
}, },
created() { created() {
this.getList(); this.getList();
this.getTransactionProjects(); this.getTransactionProjects();
this.getTreeselect(); this.getTreeselect();
this.getDicts("t_transaction_project_status").then(response => { this.getDicts("t_transaction_project_status").then((response) => {
this.transactionProjectStatus = response.data; this.transactionProjectStatus = response.data;
}); });
}, },
watch:{ watch: {
"form.tradeDeptId":{ "form.tradeDeptId": {
handler(newValue, oldValue){ handler(newValue, oldValue) {
this.changeDept(); this.changeDept();
this.getTransactor(); this.getTransactor();
}, },
deep:true deep: true,
} },
}, },
methods: { methods: {
/** 查询交易项目列表 */ /** 查询交易项目列表 */
getList() { getList(value) {
this.loading = true; this.loading = true;
selectTTradeProjectListByRoles(this.queryParams).then(response => { selectTTradeProjectListByRoles({
...this.queryParams,
pageSize: value?.limit ? value.limit : this.queryParams.pageSize,
}).then((response) => {
this.projectList = response.rows; this.projectList = response.rows;
this.total = response.total; this.total = response.total;
this.loading = false; this.loading = false;
...@@ -346,7 +465,7 @@ export default { ...@@ -346,7 +465,7 @@ export default {
createTime: null, createTime: null,
updateTime: null, updateTime: null,
isDel: null, isDel: null,
remark: null remark: null,
}; };
this.resetForm("form"); this.resetForm("form");
this.fileList = []; this.fileList = [];
...@@ -363,9 +482,9 @@ export default { ...@@ -363,9 +482,9 @@ export default {
}, },
// 多选框选中数据 // 多选框选中数据
handleSelectionChange(selection) { handleSelectionChange(selection) {
this.ids = selection.map(item => item.tradeId) this.ids = selection.map((item) => item.tradeId);
this.single = selection.length!==1 this.single = selection.length !== 1;
this.multiple = !selection.length this.multiple = !selection.length;
}, },
/** 新增按钮操作 */ /** 新增按钮操作 */
handleAdd() { handleAdd() {
...@@ -376,8 +495,8 @@ export default { ...@@ -376,8 +495,8 @@ export default {
/** 修改按钮操作 */ /** 修改按钮操作 */
handleUpdate(row) { handleUpdate(row) {
this.reset(); this.reset();
const tradeId = row.tradeId || this.ids const tradeId = row.tradeId || this.ids;
getProject(tradeId).then(response => { getProject(tradeId).then((response) => {
this.form = response.data; this.form = response.data;
this.open = true; this.open = true;
this.title = "修改交易项目"; this.title = "修改交易项目";
...@@ -385,16 +504,16 @@ export default { ...@@ -385,16 +504,16 @@ export default {
}, },
/** 提交按钮 */ /** 提交按钮 */
submitForm() { submitForm() {
this.$refs["form"].validate(valid => { this.$refs["form"].validate((valid) => {
if (valid) { if (valid) {
if (this.form.tradeId != null) { if (this.form.tradeId != null) {
updateProject(this.form).then(response => { updateProject(this.form).then((response) => {
this.msgSuccess("修改成功"); this.msgSuccess("修改成功");
this.open = false; this.open = false;
this.getList(); this.getList();
}); });
} else { } else {
addProject(this.form).then(response => { addProject(this.form).then((response) => {
this.msgSuccess("新增成功"); this.msgSuccess("新增成功");
this.open = false; this.open = false;
this.getList(); this.getList();
...@@ -406,71 +525,95 @@ export default { ...@@ -406,71 +525,95 @@ export default {
/** 删除按钮操作 */ /** 删除按钮操作 */
handleDelete(row) { handleDelete(row) {
const tradeIds = row.tradeId || this.ids; const tradeIds = row.tradeId || this.ids;
this.$confirm('是否确认删除交易项目编号为"' + tradeIds + '"的数据项?', "警告", { this.$confirm(
'是否确认删除交易项目编号为"' + tradeIds + '"的数据项?',
"警告",
{
confirmButtonText: "确定", confirmButtonText: "确定",
cancelButtonText: "取消", cancelButtonText: "取消",
type: "warning" type: "warning",
}).then(function() { }
)
.then(function () {
return delProject(tradeIds); return delProject(tradeIds);
}).then(() => { })
.then(() => {
this.getList(); this.getList();
this.msgSuccess("删除成功"); this.msgSuccess("删除成功");
}).catch(() => {}); })
.catch(() => {});
}, },
/** 导出按钮操作 */ /** 导出按钮操作 */
handleExport() { handleExport() {
const queryParams = this.queryParams; const queryParams = this.queryParams;
this.$confirm('是否确认导出所有交易项目数据项?', "警告", { this.$confirm("是否确认导出所有交易项目数据项?", "警告", {
confirmButtonText: "确定", confirmButtonText: "确定",
cancelButtonText: "取消", cancelButtonText: "取消",
type: "warning" type: "warning",
}).then(() => { })
.then(() => {
this.exportLoading = true; this.exportLoading = true;
return exportProject(queryParams); return exportProject(queryParams);
}).then(response => { })
.then((response) => {
this.download(response.msg); this.download(response.msg);
this.exportLoading = false; this.exportLoading = false;
}).catch(() => {}); })
.catch(() => {});
}, },
//获取项目列表 //获取项目列表
getTransactionProjects(query){ getTransactionProjects(query) {
getTransactionProjectList(query).then(res =>{ getTransactionProjectList(query).then((res) => {
if(res.code == 200){ if (res.code == 200) {
this.transactionProjects = res.data; this.transactionProjects = res.data;
} }
}) });
}, },
/** 查询部门下拉树结构 */ /** 查询部门下拉树结构 */
getTreeselect() { getTreeselect() {
treeselect().then(response => { treeselect().then((response) => {
this.deptOptions = response.data; this.deptOptions = response.data;
}); });
}, },
changeTransactionProject(val){ changeTransactionProject(val) {
let transactionProject = this.transactionProjects.find(item => item.transactionProjectId == val); let transactionProject = this.transactionProjects.find(
if(transactionProject.priceType == '1'){ (item) => item.transactionProjectId == val
this.priceType = '1'; );
if (transactionProject.priceType == "1") {
this.priceType = "1";
this.form.tradePrice = transactionProject.price; this.form.tradePrice = transactionProject.price;
}else{ } else {
this.priceType = transactionProject.priceType; this.priceType = transactionProject.priceType;
this.form.tradePrice = ""; this.form.tradePrice = "";
} }
this.sumAmount(); this.sumAmount();
}, },
//计算总价 //计算总价
sumAmount(){ sumAmount() {
if(this.form.tradePrice && this.form.tradeCount){ if (this.form.tradePrice && this.form.tradeCount) {
this.form.tradeTotal = this.accMul(this.form.tradePrice,this.form.tradeCount); this.form.tradeTotal = this.accMul(
}else{ this.form.tradePrice,
this.form.tradeCount
);
} else {
this.form.tradeTotal = ""; this.form.tradeTotal = "";
} }
}, },
//浮点计算出现无限小数 //浮点计算出现无限小数
accMul(arg1,arg2){ accMul(arg1, arg2) {
var m=0,s1=arg1.toString(),s2=arg2.toString(); var m = 0,
try{m+=s1.split(".")[1].length}catch(e){} s1 = arg1.toString(),
try{m+=s2.split(".")[1].length}catch(e){} s2 = arg2.toString();
return Number(s1.replace(".",""))*Number(s2.replace(".",""))/Math.pow(10,m) try {
m += s1.split(".")[1].length;
} catch (e) {}
try {
m += s2.split(".")[1].length;
} catch (e) {}
return (
(Number(s1.replace(".", "")) * Number(s2.replace(".", ""))) /
Math.pow(10, m)
);
}, },
getFileInfo(res) { getFileInfo(res) {
this.form.attachmentUrl = res.url; this.form.attachmentUrl = res.url;
...@@ -486,79 +629,83 @@ export default { ...@@ -486,79 +629,83 @@ export default {
this.form.attachmentUrl = ""; this.form.attachmentUrl = "";
}, },
//切换tab //切换tab
changeTab(tabNum){ changeTab(tabNum) {
this.queryParams.pageNum = 1; this.queryParams.pageNum = 1;
this.queryParams.pageSize = 10; this.queryParams.pageSize = 10;
this.tab = tabNum; this.tab = tabNum;
if(tabNum == 0){ if (tabNum == 0) {
this.queryParams.queryType = "all"; this.queryParams.queryType = "all";
} }
if(tabNum == 1){ if (tabNum == 1) {
this.queryParams.queryType = "myApply"; this.queryParams.queryType = "myApply";
} }
if(tabNum == 2){ if (tabNum == 2) {
this.queryParams.queryType = "myApproval"; this.queryParams.queryType = "myApproval";
} }
this.getList(); this.getList();
}, },
changeDept(){ changeDept() {
this.transactionOptions = this.transactionProjects.filter(item => item.deptId == this.form.tradeDeptId); this.transactionOptions = this.transactionProjects.filter(
(item) => item.deptId == this.form.tradeDeptId
);
this.relationTransactionProjectId = null; this.relationTransactionProjectId = null;
}, },
getTransactor(){ getTransactor() {
this.form.tradeTransactor = null; this.form.tradeTransactor = null;
if(this.form.tradeDeptId && this.form.tradeDeptId != null){ if (this.form.tradeDeptId && this.form.tradeDeptId != null) {
selectTransactorByDeptId({deptId:this.form.tradeDeptId}).then(res => { selectTransactorByDeptId({ deptId: this.form.tradeDeptId }).then(
(res) => {
this.transactorList = res.data; this.transactorList = res.data;
}); }
);
} }
} },
} },
}; };
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.outer-div { .outer-div {
//padding: 24px; //padding: 24px;
margin: 0 auto; margin: 0 auto;
} }
.header { .header {
height: 47px; height: 47px;
width: 100%; width: 100%;
//border-bottom: 1px solid #ebebeb; //border-bottom: 1px solid #ebebeb;
//margin-bottom: 24px; //margin-bottom: 24px;
} }
ul li { ul li {
margin: 0; margin: 0;
padding: 0; padding: 0;
list-style: none; list-style: none;
} }
.tab-tilte { .tab-tilte {
font-family: PingFangSC-Semibold; font-family: PingFangSC-Semibold;
letter-spacing: 0; letter-spacing: 0;
width: 90%; width: 90%;
padding-left: 0; padding-left: 0;
} }
.tab-tilte li { .tab-tilte li {
float: left; float: left;
font-size: 16px; font-size: 16px;
color: #999999; color: #999999;
// line-height: 53px; // line-height: 53px;
text-align: center; text-align: center;
margin-right: 30px; margin-right: 30px;
cursor: pointer; cursor: pointer;
} }
/* 点击对应的标题添加对应的背景颜色 */ /* 点击对应的标题添加对应的背景颜色 */
.tab-tilte .active { .tab-tilte .active {
color: #3385ff; color: #3385ff;
// border-bottom: 2px solid #3385ff; // border-bottom: 2px solid #3385ff;
} }
.applyService{ .applyService {
float: right; float: right;
width: 124px; width: 124px;
border-radius: 18px; border-radius: 18px;
color: white; color: white;
background: #1890ff; background: #1890ff;
} }
</style> </style>
...@@ -34,7 +34,7 @@ module.exports = { ...@@ -34,7 +34,7 @@ module.exports = {
proxy: { proxy: {
// detail: https://cli.vuejs.org/config/#devserver-proxy // detail: https://cli.vuejs.org/config/#devserver-proxy
[process.env.VUE_APP_BASE_API]: { [process.env.VUE_APP_BASE_API]: {
target: `http://localhost:8668/precisionEffect`, target: `http://192.168.1.5:8668/precisionEffect`,
changeOrigin: true, changeOrigin: true,
pathRewrite: { pathRewrite: {
['^' + process.env.VUE_APP_BASE_API]: '' ['^' + process.env.VUE_APP_BASE_API]: ''
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment