yiliangyiyun-pc-jj/src/views/contractManagement/salesContract.vue

<!--销售合同-->
<!--2019年5月30日 20:25:16 by jlx-->
<template>
	<div>
		<BaseHeaderLayout :leftSpan="8">
			<template slot="left">
				<ws-button type="primary" @click="handleAdd()" v-hasPermission="
            `contractManagement.salesContract.salesContractInfo.add`
          "><img width="13" height="13" style="
              vertical-align: text-top;
              position: relative;
              top: 2px;
              left: -4px;
            " src="../../../public/img/header-add.png" alt="" />添加</ws-button>
				<ws-button @click="exportlist()" v-hasPermission="
            `contractManagement.salesContract.salesContractInfo.view`
          ">导出</ws-button>
			</template>
			<template slot="right">
				<span style="width: 142px; display: inline-block; color: #8890b1">状态：</span>
				<ws-select v-model="searchTypeText" placeholder="" class="typeselect" @change="selecttaskType"
					:value="searchType">
					<ws-option v-for="item in taskTypeList" :key="item.value" :label="item.value" :value="item.value"
						style="color: #8890b1" />
				</ws-select>

				<el-date-picker v-model="value2" type="daterange" align="right" unlink-panels range-separator="至"
					start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
				</el-date-picker>
				<ws-input v-model="searchKeyWord" placeholder="可按照合同编号、买方名称、卖方名称进行查找" clearable maxlength="500"
					type="input" class="findValue"></ws-input>
				<ws-button class="find" type="primary" @click="find()"><img width="16" height="16" style="
              vertical-align: text-top;
              position: relative;
              top: 0px;
              left: -8px;
            " src="../../../public/img/sousuo.png" alt="" /></ws-button>
			</template>
		</BaseHeaderLayout>
		<el-table class="wenzi" :data="contractList.records" style="width: 100%; margin-top: 10px" height="780">
			<el-table-column type="index" label="序号">
				<template scope="scope">
					<span v-if="scope.$index < 9">0{{ scope.$index + 1 }}</span>
					<span v-else>{{ scope.$index + 1 }}</span>
				</template>
			</el-table-column>
			<el-table-column prop="contractNo" label="合同编号" width="150">
			</el-table-column>
			<el-table-column prop="goodsName" label="货名" width="80">
			</el-table-column>
			<el-table-column prop="grade" label="品级" width="80">
				<template slot-scope="scope">
					<span v-if="scope.row.grade == '一等品'" class="top-grade">{{
            scope.row.grade
          }}</span>
					<span v-if="scope.row.grade == '二等品'" class="second-class">{{
            scope.row.grade
          }}</span>
					<span v-if="scope.row.grade == '三等品'" class="third-class">{{
            scope.row.grade
          }}</span>
					<span v-if="scope.row.grade == '等外'" class="substandard">{{
            scope.row.grade
          }}</span>
				</template>
			</el-table-column>
			<el-table-column prop="weight" label="重量（吨）"> </el-table-column>
			<el-table-column prop="unitContractPrice" label="合同单价（元）">
			</el-table-column>
			<el-table-column prop="packingMethod" label="包装方式"> </el-table-column>
			<el-table-column prop="buyer" label="买方"> </el-table-column>
			<el-table-column prop="seller" label="卖方"> </el-table-column>
			<el-table-column prop="completedQuantity" label="已完成（吨）">
				<template slot-scope="scope">
					<span v-if="scope.row.proportion < 90"
						style="color: #5473e8; font-weight: 600">{{ scope.row.completedQuantity }}</span>
					<span v-if="scope.row.proportion > 90"
						style="color: red; font-weight: 600">{{ scope.row.completedQuantity }}</span>
				</template>
			</el-table-column>
			<el-table-column prop="status" label="状态">
				<template slot-scope="scope">
					<el-popover placement="left" :width="285" trigger="click" visible-arrow="false"
						@show="history(scope.row)">
						<template>
							<span slot="reference">
								<span v-if="scope.row.status == '待执行'" class="executory"></span>
								<span v-if="scope.row.status == '执行中'" class="inExecution"></span>
								<span v-if="scope.row.status == '已完成'" class="done"></span>{{ scope.row.status }}
							</span>
						</template>
						<div>
							<p style="margin-top: 0; padding-left: 10px">操作历史</p>
							<div v-for="(item, index) in historyList" class="flex">
								<div class="vertical-text vertical-text-left">
									{{ item.updateDate }}
								</div>
								<div>
									<div class="vertical-circle"></div>
									<div v-if="index != historyList.length - 1" class="vertical-line"></div>
								</div>
								<div class="vertical-text">
									{{ item.operateUser }}<br />{{ item.dealMsg }}
								</div>
							</div>
						</div>
					</el-popover>
					<img width="17" height="18" style="vertical-align: text-top; position: relative; top: -1px"
						src="../../../public/img/edit.png" @click="editClick(scope.row)" alt="" />
				</template>
			</el-table-column>
			<el-table-column prop="signingDate" label="签订日期"> </el-table-column>
			<el-table-column prop="mildewGrain" label="未回款（元）">
			</el-table-column>
			<el-table-column prop="addressUrl" label="附件">
				<template slot-scope="scope">
					<img width="18" height="20" style="vertical-align: text-top; position: relative; top: -1px"
						src="../../../public/img/fujian.png" @click="fujian(scope.row)" alt="" />
					<span v-if="scope.row.addressUrlArray != null">{{
            scope.row.addressUrlArray.length == 0 ? "":scope.row.addressUrlArray.length
          }}</span>
					<!-- <i @click="fujian(scope.row)" class="el-icon-paperclip iconCss"></i> -->
				</template>
			</el-table-column>
			<el-table-column prop="address" label="操作" width="140">
				<template slot-scope="scope">
					<img width="16" height="16" style="vertical-align: text-top; margin: 0 6px"
						src="../../../public/img/chakan.png" @click="handleExamine(scope.row)" v-hasPermission="
              `contractManagement.salesContract.salesContractInfo.view`
            " alt="" />
					<img width="17" height="16" style="vertical-align: text-top; margin: 0 6px"
						src="../../../public/img/bianji.png" v-hasPermission="
              `contractManagement.salesContract.salesContractInfo.edit`
            " @click="handleEdit(scope.row)" alt="" />
					<img width="16" height="17" style="
              vertical-align: text-top;
              position: relative;
              top: -1px;
              margin: 0 6px;
            " src="../../../public/img/shanchu.png" v-hasPermission="
              `contractManagement.salesContract.salesContractInfo.delete`
            " @click="handleDelete(scope.row)" alt="" />
				</template>
			</el-table-column>
		</el-table>
		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
			:page-size="deptCircularPage.pageSize" layout="total, sizes, prev, pager, next, jumper"
			:total="deptBudgetTotal">
		</el-pagination>
		<WinseaContentModal v-model="accessoryTFs" :title="$t('system.noticeCircular.information')"
			@on-cancel="handleClose">
			<ws-upload ref="upload" :comp-id="compId" :appendix-ids="appendixIdss" :editable="false"
				accept=".jpg, .jpeg, .png, .pdf, .doc, .zip, .rar" />
		</WinseaContentModal>
	</div>
</template>
<script>
	import {
		getList,
		export1,
		editstatus,
		billoperatehis,
		deletecontract,
	} from '@/model/contarct/index'
	import {
		downloadFile
	} from '@/utils/batchDown'
	import Pagination from '@/components/Pagination'
	import WsUpload from '@/components/WsUpload'
	import {
		dayjs,
		fmoney,
		EventBus
	} from 'base-core-lib'
	export default {
		name: 'viewSpareMoney',
		components: {
			WsUpload,
			Pagination,
		},
		watch: {
			vesselId(val) {
				this.getList()
			},
			isShow(val) {
				this.showType = val
			},
		},
		data() {
			return {
				//弹出框
				dialogViewSpareMoney: false,
				dialogApproveFormVisible: false,
				// 船舶类型
				monetaryKey: null,
				// 表格显示数据
				tableDate: [],
				size: 10,
				// 是否显示
				showType: true,
				// 年
				year: '',
				deptBudgetTotal: 0,
				currentPage: 1,
				pageSize: 10,
				appendixIdsAdd: '',
				searchType: 1,
				searchTypeText: '未完成',
				searchKeyWord: '',
				contractType: 1,
				goodsType: 1,
				startDate: null,
				endDate: null,
				// 提交类型
				submitType: true,
				contractForm: {},
				categoryIndex: 0,
				rulesVendor: {},
				size: 10,
				appendixIdss: [],
				compId: sessionStorage.getItem('ws-pf_compId'),
				deptCircularPage: {},
				date: {
					year: dayjs().format('YYYY'),
					month: dayjs().format('MM'),
				},
				contractList: [],
				deptBudgetList: {},
				historyList: [],
				pickerBeginDateBefore: {
					disabledDate: (time) => {
						return time.getTime() > Date.now()
					},
				},
				accessoryTFs: false,
				accesscard: false,
				accessurl: '',
				fileList: [],
				taskTypeList: [{
						value: '未完成',
						type: 1
					},
					{
						value: '已完成',
						type: 2
					},
					{
						value: '未回款',
						type: 3
					},
					{
						value: '全部合同',
						type: ''
					},
				],
				addressUrls: [],
				pickerOptions: {
					shortcuts: [{
							text: '本周',
							onClick(picker) {
								const end = new Date()
								const start = new Date()
								var thisDay = start.getDay()
								var thisDate = start.getDate()
								if (thisDay != 0) {
									start.setDate(thisDate - thisDay)
								}
								picker.$emit('pick', [start, end])
							},
						},
						{
							text: '本月',
							onClick(picker) {
								const end = new Date()
								const start = new Date()
								start.setDate(1)
								picker.$emit('pick', [start, end])
							},
						},
						{
							text: '本季度',
							onClick(picker) {
								var oDate = new Date()

								var thisYear = oDate.getFullYear()
								var thisMonth = oDate.getMonth() + 1

								var n = Math.ceil(thisMonth / 3) // 季度

								var Month = n * 3 - 1

								var start = new Date(thisYear, Month - 2, 1)
								var end = new Date()

								picker.$emit('pick', [start, end])
							},
						},
					],
				},
				value1: '',
				value2: '',
			}
		},
		activated() {
			//cg.viewBudget
			//cg.viewSpareMoney
			// this.getVesselData();
			this.getList()
			this.showType = this.isShow
		},
		methods: {
			dateFormat(fmt, date) {
				let ret
				const opt = {
					'Y+': date.getFullYear().toString(), // 年
					'm+': (date.getMonth() + 1).toString(), // 月
					'd+': date.getDate().toString(), // 日
					'H+': date.getHours().toString(), // 时
					// "M+": date.getMinutes().toString(),         // 分
					// "S+": date.getSeconds().toString()          // 秒
					// 有其他格式化字符需求可以继续添加，必须转化成字符串
				}
				for (let k in opt) {
					ret = new RegExp('(' + k + ')').exec(fmt)
					if (ret) {
						fmt = fmt.replace(
							ret[1],
							ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, '0')
						)
					}
				}
				return fmt
			},

			handleClose() {
				this.dialogViewSpareMoney = false
			},
			handleClose1() {
				this.accesscard = false
			},
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`)
				this.pageSize = val
				this.getList()
			},
			handleCurrentChange(val) {
				this.currentPage = val
				console.log(`当前页: ${val}`)
				this.getList()
			},
			getList() {
				getList({
						compId: sessionStorage.getItem('ws-pf_compId'),
						contractType: this.contractType,
						goodsType: this.goodsType,
						currentPage: this.currentPage,
						pageSize: this.pageSize,
						searchType: this.searchType,
						searchKeyWord: this.searchKeyWord,
						startDate: this.startDate,
						endDate: this.endDate,
						contrPage: this.contrPage,
					})
					.toPromise()
					.then((response) => {
						for (var i = 0; i < response.records.length; i++) {
							if (response.records[i].addressUrl != null) {
								if (response.records[i].addressUrl != "") {
									response.records[i].addressUrlArray =
										response.records[i].addressUrl.split(',')
								}
							} else {
								response.records[i].addressUrlArray = []
							}

							if (response.records[i].imperfectGrain != null) {
								response.records[i].proportion =
									Math.floor(
										(response.records[i].imperfectGrain /
											response.records[i].weight) *
										10000
									) / 100
							} else {
								response.records[i].proportion = 0
							}
						}
						this.deptCircularPage.currentPage = response.current
						this.deptCircularPage.pageSize = response.size
						this.deptBudgetTotal = response.total
						this.contractList = response
						for (var i = 0; i < response.records.length; i++) {
							var arr = new Array()
							this.addressUrls[i] = new Array()
							if (this.contractList.records[i].addressUrl != null) {
								arr = this.contractList.records[i].addressUrl.split(',')
								this.addressUrls[i] = arr
							}
						}
					})
			},
			// 上传附件
			uploadSuccess(data, files, url) {
				console.log(data, files, url)

				// this.deptBudgetList.
				// this.formData.append('files', files)
				// this.feedbackObj.uploadNameAttachment = data.appendixName
				// this.feedbackObj.pathUploadAttachment = data.appendixPath
				// // this.newAppendixs = files
				// this.onChangeFlag = true
			},
			editClick(row) {
				var status = ''
				if (row.status == '待执行' || row.status == '已完成') {
					status = '执行中'
				} else if (row.status == '执行中') {
					status = '已完成'
				}
				//cancelButtonClass: "btn-custom-cancel"
				this.$confirm(`是否将状态改为${status}`, {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning',
					})
					.then(() => {
						editstatus({
								id: row.id
							})
							.toPromise()
							.then((response) => {
								this.$notify.success({
									title: '成功',
									message: '状态修改成功',
								})
								this.getList()
							})
							.catch((response) => {
								// EventBus.$emit('error', this.$t('showMessage.asteriskRequired'))
							})
					})
					.catch(() => {
						return false
					})
			},
			selecttaskType(e) {
				for (var i = 0; i < this.taskTypeList.length; i++) {
					if (this.taskTypeList[i].value == e) {
						this.searchType = this.taskTypeList[i].type
					}
				}
			},
			// receiveAttachmentPath
			fujian(row) {
				if (row.addressUrl === null || row.addressUrl === '') {
					EventBus.$emit(
						'warning',
						this.$t('system.noticeCircular.NoInformation')
					)
				} else {
					this.accessoryTFs = true
				}
				this.appendixIdss = row.addressUrl
			},
			handleExamine(row) {
				this.$router.push({
					name: 'salesContractExamine',
					query: {
						id: row.id
					},
				})
			},
			handleAdd() {
				this.$router.push({
					path: 'salesContractAdd'
				})
			},
			handleEdit(row) {
				this.$router.push({
					name: 'salesContractEdit',
					query: {
						id: row.id
					},
				})
			},

			// 关闭 dialog时 处理文件url 初始化upload组件
			handleCloe() {
				this.dialogViewSpareMoney = false
			},
			history(row) {
				billoperatehis({
						id: row.id
					})
					.toPromise()
					.then((response) => {
						this.historyList = response
					})
			},
			find() {
				if (this.value2) {
					this.startDate = this.dateFormat('YYYY-mm-dd', this.value2[0])
					this.endDate = this.dateFormat('YYYY-mm-dd', this.value2[1])
				} else {
					this.startDate = ''
					this.endDate = ''
				}
				this.currentPage = 1
				this.getList()
			},
			async exportlist() {
				const {
					data
				} = await export1({
					compId: sessionStorage.getItem('ws-pf_compId'),
					contractType: this.contractType,
					goodsType: this.goodsType,
					currentPage: this.currentPage,
					pageSize: this.pageSize,
					searchType: this.searchType,
					searchKeyWord: this.searchKeyWord,
					startDate: this.startDate,
					endDate: this.endDate,
				}, {}, {
					responseType: 'blob'
				}).toPromise()
				downloadFile({
					res: data,
					fileName: `${
          this.date.year + (this.date.month ? `-${this.date.month}` : '')
        }_销售合同`,
					type: 'xls',
				})
			},

			handleDelete(row) {
				var handleDelete = ' '
				if (row.handleDelete == '') {}
				this.$confirm(
						`删除该合同将同时永久删除合同对应的临时仓库相关数据，是否确定删除？`, {
							cancelButtonText: '取消',
							confirmButtonText: '确定',
							type: 'warning',
						}
					)
					.then(() => {
						deletecontract({
								id: row.id
							})
							.toPromise()
							.then((response) => {
								this.$notify.success({
									title: '成功',
									message: '删除成功',
								})
								this.getList()
							})
							.catch((response) => {
								// EventBus.$emit('error', this.$t('showMessage.asteriskRequired'))
							})
					})
					.catch(() => {
						return false
					})
			},
		},
	}
</script>
<style lang="scss" scoped>
	.vertical-text-left {
		width: 62px;
		text-align: right;
	}

	.flex {
		display: flex;
	}

	.el-range-editor.el-input__inner {
		margin-left: 10px;
	}

	/deep/.base_header_layout .grid-content.right .find.el-button--primary {
		width: 30px;
		margin-left: -10px;
		border-top-left-radius: 0px;
		border-bottom-left-radius: 0px;
	}

	.el-button--primary {
		background-color: #5878e8;
		border-color: #5878e8;
	}

	.el-button--default {
		border: 1px solid #5473e8;
		color: #5473e8;
	}

	.warning {
		width: 100%;
		height: 2px;
		background: red;
	}

	.executory,
	.inExecution,
	.done {
		width: 6px;
		height: 6px;
		display: inline-block;
		border-radius: 50%;
		position: relative;
		top: -1px;
	}

	.executory {
		background: #ff9f24;
	}

	.inExecution {
		background: #5878e8;
	}

	.done {
		background: #50cad4;
	}

	.top-grade {
		background: linear-gradient(90deg, #5678e9, #7993f6);
		color: #fff;
		padding: 3px;
		border-radius: 2px;
	}

	.second-class {
		background: linear-gradient(90deg, #50cdd9, #82e2ea);
		color: #fff;
		padding: 3px;
		border-radius: 2px;
	}

	.third-class {
		background: linear-gradient(90deg, #ffa735, #ffbf70);
		color: #fff;
		padding: 3px;
		border-radius: 2px;
	}

	.substandard {
		background: linear-gradient(90deg, #b2b4bb, #ced0d5);
		color: #fff;
		padding: 3px;
		border-radius: 2px;
	}

	.wrap {
		width: 400px;
		position: absolute;
		top: 131px;
		left: 794px;
		transform-origin: right center;
		z-index: 2005;
	}

	.vertical-line {
		height: 100px;
		border-left: 2px solid #e9ecf7;
		margin-left: 4px;
		padding: 0 3px;
		// border-image: -webkit-linear-gradient(#00eba7, #08b8e6) 30 30;
		// border-image: -moz-linear-gradient(#00eba7, #08b8e6) 30 30;
		// border-image: linear-gradient(#00eba7, #08b8e6) 30 30;
	}

	.el-pagination {
		padding: 10px 15px;
		margin-bottom: 0;
		text-align: center;
	}

	/deep/.el-pager li.active {
		color: #5878e8;
		cursor: default;
	}

	/deep/.el-pager li:hover {
		color: #5878e8;
		cursor: default;
	}

	.vertical-circle {
		width: 10px;
		height: 10px;
		border: 2px solid #5878e8;
		background-color: #ffffff;
		-webkit-border-radius: 100px;
	}

	.vertical-circle:first-child {
		color: red;
	}

	.vertical-text {
		margin: 0 10px;
		color: #8890b1;
		font-size: 12px;
		margin-top: -4px;
	}

	/deep/.el-table .el-table__header .cell,
	/deep/.el-table .el-table__body .cell {
		text-align: center;
	}

	.typeselect {
		width: 500px;
	}

	.padding-xs {
		padding: 15px;
		text-align: right;
	}

	.clearfix:after {
		content: '';
		display: block;
		clear: both;
	}

	.el-table {
		font-size: 16px;
	}

	.taskType {
		width: 100%;
		background-color: #fff;
		margin-top: 2px;
		margin-bottom: 10px;
		list-style: none;

		// padding-bottom: 20px;
		li {
			float: left;
			border: 1px solid #6ea0f3;
			border-radius: 5px;
			max-width: 190px;
			padding: 0 5px;
			text-align: center;
			margin: 10px 20px;
			cursor: pointer;
			font-size: 14px;

			p {
				margin: 8px 0px;

				span {
					color: #e74c3c;
				}
			}
		}

		li:hover {
			background-color: #e4eeff;
			color: #1d6ced;
		}
	}

	.el-date-editor--date {
		margin: 0 10px;
	}

	.findValue {
		margin: 0 10px;
	}

	/deep/.findValue .el-input__inner {
		border-top-right-radius: 0px;
		border-bottom-right-radius: 0px;
	}

	.button-container {
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
		width: 100%;
		height: 50px;
		padding: 0 10px;

		&>div {
			margin-left: 10px;
			display: flex;
			flex-wrap: nowrap;
			flex-direction: row;

			&>span {
				line-height: 50px;
			}
		}

		/deep/.auditFlow-box {
			position: unset;
			margin-left: 10px;

			&/deep/.auditFlow-icon {
				width: auto;
				padding-right: 30px;
			}

			&/deep/.auditFlow-main {
				position: absolute;
			}
		}
	}

	.box-app {
		display: inline-block;
		float: left;
		margin-left: 30px;
		line-height: 50px;
	}

	/deep/.el-dialog {
		.el-form-item {
			margin-bottom: 0 !important;

			.el-input--medium {
				textarea {
					min-height: 100px !important;
				}
			}
		}
	}

	.collapse-bottom {
		margin-bottom: 20px;
	}

	.input-main .textarea .el-textarea__inner {
		width: 100%;
		z-index: 1;
	}

	/*.crt-main .textarea /deep/ .el-form-item__label {*/
	/*  height: 82px;*/
	/*}*/
	// 控制select为只读的时候显示样式

	.hide-sel {
		.el-input__inner {
			border: 0px;
		}

		.el-icon-arrow-up {
			display: none;
		}

		.el-textarea__inner {
			background-color: #fff !important;
			border: 0;
		}

		.el-date-editor {
			i {
				display: none;
			}
		}

		.is-disabled {
			.el-input__inner:hover {
				background-color: #fff !important;
				border: 0;
			}

			color: #606266;

			.el-input__inner {
				background-color: #fff !important;
				border: 0;
				color: #606266;
			}

			.el-textarea__inner {
				background-color: #fff !important;
				border: 0;
				color: #606266;
			}
		}
	}

	// 控制select为只读的时候显示样式
	/deep/.ws-class-table-col {
		height: auto;
		padding: 0px 2px;

		/deep/.el-input__inner {
			padding: 0px 2px;
		}
	}

	/deep/.is-disabled {
		.el-input__prefix,
		.el-input__suffix {
			display: none;
		}

		.el-input__inner {
			background-color: #fff;
			border-color: #fff !important;
			color: #000 !important;
			font-size: 14px;
			cursor: text;
			padding: 0 !important;
		}

		.el-message-box {
			width: 440px;
			height: 160px;
			background: #ffffff;
			box-shadow: 0px 2px 31px 0px rgba(66, 75, 112, 0.23);
			border-radius: 4px;
		}

		/deep/.el-message-box__message p {
			width: 351px;
			height: 20px;
			font-size: 14px;
			font-weight: 400;
			color: #191919;
			line-height: 20px;
		}

		.el-message-box__title {
			width: 440px;
			height: 160px;
			background: #ffffff;
			box-shadow: 0px 2px 31px 0px rgba(66, 75, 112, 0.23);
			border-radius: 4px;
		}
	}

	/deep/.typeselect .el-input__inner {
		color: #8890b1;
	}
</style>