Skip to content

H
HotelProject
Commit eeaf4b54 authored by 黄奎's avatar 黄奎
Browse files
Options

页面修改

parent d69a2be5
Show whitespace changes
Inline Side-by-side
Showing with 274 additions and 548 deletions
src/components/assetsman/Quotation.vue
View file @ eeaf4b54
......@@ -2,57 +2,31 @@
<div class="Quotation">
<div class="routerTitle">
<span class="pageTitle">見積書</span>
<span
@click="morequery = !morequery"
style="display:inline-flex;align-items:center;cursor: pointer;"
class="f12 cd6"
>
<span @click="morequery = !morequery" style="display:inline-flex;align-items:center;cursor: pointer;"
class="f12 cd6">
<span style="margin-right:5px">詳細なクエリー</span>
<img
v-show="!morequery"
style="width:12px;height:12px;"
src="../../assets/img/more.png"
alt=""
/>
<img
v-show="morequery"
class="roatImg"
style="width:12px;height:12px"
src="../../assets/img/more.png"
alt=""
/>
<img v-show="!morequery" style="width:12px;height:12px;" src="../../assets/img/more.png" alt="" />
<img v-show="morequery" class="roatImg" style="width:12px;height:12px" src="../../assets/img/more.png" alt="" />
</span>
<span @click="getMonths" style="margin-left:20px" class="chaxunSpan"
>クエリー</span
>
<span @click="addSupplier" style="margin-left:20px" class="addSpan">
<img
style="width:10px;height:10px;margin-right:6px"
src="../../assets/img/add.png"
alt=""
/>
<span @click="getMonths" style="margin-left:20px" class="chaxunSpan" title="查询">クエリー</span>
<span @click="clearAddMsg" style="margin-left:20px" class="addSpan" title="新增">
<img style="width:10px;height:10px;margin-right:6px" src="../../assets/img/add.png" alt="" />
新たに</span>
<span @click="DeleteAll" style="margin-left:20px" class="addSpan">一括削除</span>
<span @click="DeleteAll" style="margin-left:20px" class="addSpan" title="全部删除">一括削除</span>
</div>
<div class="padContent">
<ul v-show="morequery" class="queryul">
<li>
<el-date-picker
v-model="msg.MonthStr"
type="month"
value-format="yyyy-MM"
placeholder="選択月">
<el-date-picker v-model="msg.MonthStr" type="month" value-format="yyyy-MM" placeholder="選択月">
</el-date-picker>
</li>
</ul>
<div class="hotelProductManage2_calendar">
<div class="hotelProductManage2_calendarItem" v-for="(item, index) in dayList" :key="index">
<div class="calendarItem_month" title="点击查看详情" @click="calendarShow(item, index)">
{{item.date}}</div>
<div class="hotelproductCkbox" style="text-align:right;padding:0 10px 0 0">
<el-checkbox v-model="item.isCked" @change="changeHotelStatus(item,index)">全テーマ検索</el-checkbox>
<div class="calendarItem_month" title="点击查看详情">
{{item.date}}
<el-checkbox style="margin-right:2px;" v-model="item.isCked" @change="changeHotelStatus(item,index)">全テーマ検索
</el-checkbox>
</div>
<div class="calendarItem_week">
<div>周天</div>
......@@ -79,7 +53,7 @@
<th style="text-align:center">在庫数量</th>
<th style="text-align:center">操作</th>
</tr>
<tr v-for="(childItem,childIndex) in subItem.data.SubList">
<tr v-for="(childItem,childIndex) in subItem.data.SubList" :key="childIndex">
<td style="text-align:center;white-space:nowrap; ">
{{childItem.Money}}
</td>
......@@ -105,314 +79,148 @@
</div>
</div>
</div>
<div class="hotelProductManage2_calendarBox" v-show="calendar.show">
<HotelProductCalendar ref="hotelProductCalendar" :calendar="calendar" @goEdit="goEdit"></HotelProductCalendar>
</div>
</div>
<div style="background:#eeeeee;padding:15px;box-sizing: border-box;" v-show="dialogState">
<el-form
class="MyEditForm"
:model="addMsg"
:rules="rules"
ref="addMsg"
label-width="0px"
>
<div style="background:#eeeeee;padding:15px;box-sizing: border-box;">
<el-form class="MyEditForm" :model="addMsg" :rules="rules" ref="addMsg" label-width="0px">
<div class="basefix">
<div v-show="addMsg.DateList.length>0">
<el-tag style="margin:0 10px 10px 0"
v-for="(item,index) in addMsg.DateList"
:key="index"
@close="DeleteDate(item,index)"
closable>
<el-tag style="margin:0 10px 10px 0" v-for="(item,index) in addMsg.DateList" :key="index"
@close="DeleteDate(item,index)" closable>
{{item}}
</el-tag>
</div>
<div class="baseform">
<el-form-item label="" prop="DayType">
<span class="label">タイプ</span>
<el-select @change="TypeChange" size="small" v-model="addMsg.DayType" placeholder="ホテル" clearable filterable>
<el-option label="年" :value="1"></el-option>
<el-option label="月" :value="2"></el-option>
<el-option label="年-月-周" :value="3"></el-option>
<el-option label="時間帯" :value="4"></el-option>
<el-option label="カスタム" :value="5"></el-option>
</el-select>
</el-form-item>
<!--
<el-form-item label="" v-show="addMsg.DayType==5">
<span class="label">日期</span>
<el-date-picker
size="mini"
type="dates"
value-format="yyyy-MM-dd"
v-model="addMsg.DateList"
placeholder="选择一个或多个日期">
</el-date-picker>
</el-form-item> -->
<el-form-item label="" v-show="addMsg.DayType==4">
<span class="label">開始日時</span>
<el-date-picker
size="mini"
v-model="addMsg.StartTime"
type="date"
value-format="yyyy-MM-dd"
placeholder="期日を選ぶ"
>
</el-date-picker>
</el-form-item>
<el-form-item label="" v-show="addMsg.DayType==4">
<span class="label">終了期日</span>
<el-date-picker
size="mini"
v-model="addMsg.EndTime"
type="date"
value-format="yyyy-MM-dd"
placeholder="期日を選ぶ"
>
</el-date-picker>
</el-form-item>
<el-form-item label="" v-show="addMsg.DayType==1 || addMsg.DayType==3">
<span class="label">年</span>
<el-date-picker
size="mini"
v-model="addMsg.Year"
value-format="yyyy"
type="year"
placeholder="選択の年">
</el-date-picker>
</el-form-item>
<el-form-item label="" v-show="addMsg.DayType==2">
<span class="label">月</span>
<el-date-picker
size="mini"
v-model="addMsg.Month"
type="month"
value-format="yyyy-MM"
placeholder="選択月">
</el-date-picker>
</el-form-item>
<el-form-item label="" v-show="addMsg.DayType==3">
<span class="label">月</span>
<el-select size="small" v-model="thisMonth" placeholder="ホテル" clearable filterable>
<el-option label="一月" value="01"></el-option>
<el-option label="二月" value="02"></el-option>
<el-option label="三月" value="03"></el-option>
<el-option label="四月" value="04"></el-option>
<el-option label="五月" value="05"></el-option>
<el-option label="六月" value="06"></el-option>
<el-option label="七月" value="07"></el-option>
<el-option label="八月" value="08"></el-option>
<el-option label="九月" value="09"></el-option>
<el-option label="十月" value="10"></el-option>
<el-option label="十一月" value="11"></el-option>
<el-option label="十二月" value="12"></el-option>
</el-select>
</el-form-item>
<el-form-item label="" v-show="addMsg.DayType==3">
<span class="label">周</span>
<el-select size="small" v-model="addMsg.Week" placeholder="ホテル" clearable filterable>
<el-option label="" :value="-1"></el-option>
<el-option label="月曜日" :value="1"></el-option>
<el-option label="火曜日" :itemid="2"></el-option>
<el-option label="水曜日" :value="3"></el-option>
<el-option label="木曜日" :value="4"></el-option>
<el-option label="金曜日" :value="5"></el-option>
<el-option label="土曜日" :value="6"></el-option>
<el-option label="日曜日" :value="7"></el-option>
</el-select>
</el-form-item>
<el-form-item label="" prop="Money">
<span class="label">ばいばい価格</span>
<el-input
@keyup.native="checkInteger(addMsg,'Money')"
size="mini"
v-model="addMsg.Money"
placeholder="ばいばい価格"
></el-input>
<el-input @keyup.native="checkInteger(addMsg,'Money')" size="mini" v-model="addMsg.Money"
placeholder="ばいばい価格"></el-input>
</el-form-item>
<el-form-item label="" prop="CostPrice">
<span class="label">原価</span>
<el-input
@keyup.native="checkInteger(addMsg,'CostPrice')"
size="mini"
v-model="addMsg.CostPrice"
placeholder="原価"
></el-input>
<el-input @keyup.native="checkInteger(addMsg,'CostPrice')" size="mini" v-model="addMsg.CostPrice"
placeholder="原価"></el-input>
</el-form-item>
<el-form-item label="" prop="Inventory">
<span class="label">在庫数量</span>
<el-input
@keyup.native="checkInteger(addMsg,'Inventory')"
size="mini"
v-model="addMsg.Inventory"
placeholder="在庫数量"
></el-input>
<el-input @keyup.native="checkInteger(addMsg,'Inventory')" size="mini" v-model="addMsg.Inventory"
placeholder="在庫数量"></el-input>
</el-form-item>
</div>
</div>
<div class="btnformItem">
<span v-loading="queryLoad" class="submitBtn" type="primary" @click="submitForm('addMsg')"
>確定</span
>
<span class="exitBtn" @click="dialogState = false">キャンセル</span>
<span v-loading="queryLoad" class="submitBtn" type="primary" @click="submitForm('addMsg')">確定</span>
<span class="exitBtn" @click="clearAddMsg()">キャンセル</span>
</div>
</el-form>
</div>
</div>
</div>
</template>
<script>
import HotelProductCalendar from './HotelProductCalendar.vue';
import moment from 'moment'
export default {
import moment from 'moment'
export default {
name: "assetsList",
components: {
HotelProductCalendar
},
components: {},
data() {
return {
queryLoad:false,
caozuoState: false,
queryLoad: false,
addMsg: {
RoomId:0,
HotelId:0,
DateList:[],
DayType:'',
StartTime:'',
EndTime:'',
Year:'',
Month:'',
Week:-1,
Money:'',
CostPrice:'',
Inventory:'',
RoomId: 0,
HotelId: 0,
DateList: [],
StartTime: '',
EndTime: '',
Year: '',
Month: '',
Week: -1,
Money: '',
CostPrice: '',
Inventory: '',
},
pickerOptions: {
　　disabledDate(time) {
　　　　return time.getTime() < Date.now() - 24 * 60 * 60 * 1000
}
},
morequery: false,
dateList: [],
currentPage: 1,
tableData: [],
morequery: false, //高级查询
dateList: [], //日历数据
loading: false,
total: 0,
msg: {
RoomId:0,
MonthStr:'',
RoomId: 0,
MonthStr: '',
},
dialogtitle: "新增资产",
dialogState: false,
rules: {
Money: [{ required: true, message: "販売価格を入力してください", trigger: "blur" }],
CostPrice: [{ required: true, message: "仕入れ値を入力してください", trigger: "blur" }],
Inventory: [{ required: true, message: "在庫数を入力してください", trigger: "blur" }],
DayType: [
{ required: true, message: "型を選んでください", trigger: "change" }
]
Money: [{
required: true,
message: "販売価格を入力してください",
trigger: "blur"
}],
CostPrice: [{
required: true,
message: "仕入れ値を入力してください",
trigger: "blur"
}],
Inventory: [{
required: true,
message: "在庫数を入力してください",
trigger: "blur"
}],
},
baseformItem:false,
ID:0,
RoomId:0,
HotelId:0,
dayList:[],
RoomId: 0,
HotelId: 0,
dayList: [],
calendar: {
num: 0,
show: false,
data: {}
},
editShow:false,
condition: {
month: ''
},
hotelInfo:{},
thisMonth:'',
hotelInfo: {},
};
},
created(){
if(this.$route.query.RoomId){
this.msg.RoomId=this.$route.query.RoomId;
this.RoomId=this.$route.query.RoomId;
}
if(this.$route.query.HotelId){
this.HotelId=this.$route.query.HotelId;
}
this.msg.MonthStr=moment().format("YYYY-MM");
created() {
this.msg.MonthStr = moment().format("YYYY-MM");
this.condition.month = moment().format("YYYY-MM");
},
mounted() {
if (this.$route.query.RoomId) {
this.addMsg.RoomId = this.$route.query.RoomId;
this.RoomId = this.$route.query.RoomId;
}
if (this.$route.query.HotelId) {
this.HotelId = this.$route.query.HotelId;
this.addMsg.HotelId = this.$route.query.HotelId;
}
this.getMonths();
},
methods: {
DeleteAll(){
let msg={
RoomId:this.RoomId,
DateList:this.addMsg.DateList
DeleteAll() {
let msg = {
RoomId: this.RoomId,
DateList: this.addMsg.DateList
}
if(msg.DateList.length==0){
if (msg.DateList.length == 0) {
this.Error("日付を選んでください!");
return;
}
this.$confirm("削除するか?", "ヒント", {
confirmButtonText: "を選択します",
cancelButtonText: "キャンセル",
type: "warning"
})
.then(() => {
this.apipost("scm_post_DelSCMHotelRoomPriceInfo",msg,
var that = this;
this.Confirm("削除するか?", "ヒント", function () {
that.apipost("scm_post_DelSCMHotelRoomPriceInfo", msg,
res => {
if (res.data.resultCode == 1) {
this.getMonths();
this.addMsg = {
RoomId:this.RoomId,
HotelId:this.HotelId,
DateList:[],
DayType:'',
StartTime:'',
EndTime:'',
Year:'',
Month:'',
Week:-1,
Money:'',
CostPrice:'',
Inventory:'',
};
that.getMonths();
that.clearAddMsg();
} else {
this.Error(res.data.message);
that.Error(res.data.message);
}
});
})
.catch(() => {
this.$message.info("削除しました");
});
},
stockColor: function (item, item2, childItem) {
if (item.date === item2.month && item2.hasOwnProperty('data')) {
return 'hasStock_1';
} else {
return;
}
},
TypeChange(val){
if(val!=5){
this.addMsg.DateList=[];
}
},
//日历点击事件
calendarDayOn: function (item, item2) {
if (item.date === item2.month) {
......@@ -424,29 +232,14 @@ export default {
this.addMsg.DateList.splice(dayIndex, 1)
}
}
if(this.addMsg.DateList.length>0){
this.addMsg.DayType=5;
}
},
goEdit: function (type, date, BatchNumber) {
let nowDate = new Date().Format('yyyy-MM-dd');
this.msg.StartDate = date === undefined ? nowDate : date;
this.msg.EndDate = date === undefined ? nowDate : date;
if (type === '2' && date) {
this.getDetail(date, BatchNumber);
}
this.editShow = true;
},
getData: function (date, key) {
this.loading=true;
this.apipost('scm_get_GetSCMHotelRoomPriceMonthList',
{
RoomId:this.RoomId,
MonthStr:date,
this.loading = true;
this.apipost('scm_get_GetSCMHotelRoomPriceMonthList', {
RoomId: this.RoomId,
MonthStr: date,
}, res => {
this.loading=false;
this.loading = false;
if (res.data.resultCode === 1) {
let json = res.data.data;
this.hotelInfo.HotelName = json.HotelName;
......@@ -468,13 +261,9 @@ export default {
},
getCalendarDays: function (date, key) {
let month = moment(date).format("YYYY-MM")
let tempMonth = this.$calendarUtils.createCalendar_V2(date).DayArray;
let days = [];
for (let i = 0; i < tempMonth.length; i++) {
// let month = tempMonth[i].day.Format('yyyy-MM');
// let day = tempMonth[i].day.Format('yyyy-MM-dd');
let month = moment(tempMonth[i].day).format("YYYY-MM");
let day = moment(tempMonth[i].day).format("YYYY-MM-DD");
days.push({
......@@ -495,7 +284,6 @@ export default {
for (let i = 0; i < 4; i++) {
if (i !== 0) {
let newDate = new Date(month).setDate(32);
// month = new Date(newDate).Format('yyyy-MM') + '-1';
month = moment(newDate).format('YYYY-MM') + '-1';
}
this.getCalendarDays(month, i);
......@@ -521,146 +309,85 @@ export default {
})
}
},
calendarShow: function (item, index) {
this.calendar.num = index;
this.calendar.data = item;
this.calendar.show = true;
},
DeleteDate(item, index) {
this.addMsg.DateList.splice(index, 1);
},
addSupplier() {
this.addMsg = {
RoomId:this.RoomId,
HotelId:this.HotelId,
DateList:[],
DayType:'',
StartTime:'',
EndTime:'',
Year:'',
Month:'',
Week:-1,
Money:'',
CostPrice:'',
Inventory:'',
};
this.dialogState = true;
//清空消息
clearAddMsg() {
this.addMsg.DateList=[];
this.addMsg.StartTime="";
this.addMsg.EndTime="";
this.addMsg.Year="";
this.addMsg.Month="";
this.addMsg.Week=-1;
this.addMsg.Money=0;
this.addMsg.CostPrice=0;
this.addMsg.Inventory=0;
},
Edit(item) {
this.dialogState = true;
this.addMsg = {
RoomId:this.RoomId,
HotelId:item.HotelId,
DateList:[],
DayType:4,
StartTime:item.DayStr,
EndTime:item.DayStr,
Year:'',
Month:'',
Week:-1,
Money:item.Money,
CostPrice:item.CostPrice,
Inventory:item.Inventory,
};
this.addMsg.StartTime=item.DayStr;
this.addMsg.EndTime=item.DayStr;
this.addMsg.DateList.push(item.DayStr);
this.addMsg.Year="";
this.addMsg.Month="";
this.addMsg.Week=-1;
this.addMsg.Money=item.Money;
this.addMsg.CostPrice=item.CostPrice;
this.addMsg.Inventory=item.Inventory;
},
submitForm(formName) {
this.$refs[formName].validate(valid => {
if (valid) {
if(this.addMsg.DayType==1 || this.addMsg.DayType==3){
if(this.addMsg.Year==""){
this.Error("年を選んでください!");
return;
}
}
if(this.addMsg.DayType!=4){
this.addMsg.StartTime='';
this.addMsg.EndTime='';
}
if(this.addMsg.DayType==2){
if(this.addMsg.Month==""){
this.Error("選択月");
return;
}
}
if(this.addMsg.DayType==3){
if(this.addMsg.Week==""){
this.Error("周を選んでください");
return;
}
if(this.thisMonth==""){
this.Error("選択月");
return;
}
this.addMsg.Month=this.thisMonth;
}
if(this.addMsg.DayType==4){
if(this.addMsg.StartTime==""){
this.Error("開始時間を選択してください");
return;
}
if(this.addMsg.EndTime==""){
this.Error("終了時間を選んでください");
return;
}
}
if(this.addMsg.DayType!=5){
this.addMsg.DateList=[];
}
if(this.addMsg.Week==""){
this.addMsg.Week=-1;
}
this.queryLoad=true;
this.queryLoad = true;
this.apipost("scm_post_SetSCMHotelRoomPriceInfo", this.addMsg,
res => {
this.queryLoad = false;
if (res.data.resultCode == 1) {
this.Success(res.data.message);
this.getMonths();
this.dialogState=false;
this.clearAddMsg();
} else {
this.Error(res.data.message);
}
});
} else {
return false;
}
});
},
currentChange(val) {
this.msg.pageIndex = val;
},
}
};
};
</script>
<style>
.Quotation .el-checkbox__input.is-checked+.el-checkbox__label{
.Quotation .el-checkbox__input.is-checked+.el-checkbox__label {
color: rgb(8, 155, 171);
}
.Quotation .el-checkbox__input.is-checked .el-checkbox__inner, .Quotation .el-checkbox__input.is-indeterminate .el-checkbox__inner{
}
.Quotation .el-checkbox__input.is-checked .el-checkbox__inner,
.Quotation .el-checkbox__input.is-indeterminate .el-checkbox__inner {
background-color: rgb(8, 155, 171);
border-color: rgb(8, 155, 171);
}
.Quotation .el-tag{
color:rgb(8, 155, 171);
background:rgba(8, 155, 171,0.3)
}
}
.Quotation .el-tag {
color: rgb(8, 155, 171);
background: rgba(8, 155, 171, 0.3)
}
.Quotation .el-tag .el-tag__close:hover {
background-color:rgb(8, 155, 171);
}
.Quotation .el-loading-mask{
background-color: rgb(8, 155, 171);
}
.Quotation .el-loading-mask {
border-radius: 20px;
}
}
.hotelProductManage2_calendarItem>.calendarItem_day>div>.hasStock_1 {
color: #f56c6c!important;
background-color: #ff6363 !important;
}
.hotelProductManage2_calendar {
position: relative;
padding: 20px 0;
......@@ -680,9 +407,8 @@ export default {
.hotelProductManage2_calendarItem {
display: inline-block;
margin: 0 5px;
margin: 0 4px;
width: 24%;
/* width:438px; */
background-color: #fff;
border: 1px solid #d1d1d1;
border-radius: 4px;
......@@ -699,7 +425,6 @@ export default {
text-align: center;
font-size: 14px;
cursor: pointer;
text-decoration: underline;
}
.hotelProductManage2_calendarItem>.calendarItem_week {
......@@ -729,7 +454,7 @@ export default {
.hotelProductManage2_calendarItem>.calendarItem_day>div {
display: inline-block;
padding: 15px 0;
padding: 3px 0;
width: 14.2%;
position: relative;
}
......@@ -771,8 +496,9 @@ export default {
background-color: #02F78E;
}
.Quotation {
.Quotation {
width: 100%;
height: 100%;
}
}
</style>
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