洋浦学校 德育管理 菜谱管理前端开发

init
gongdi 3 years ago
parent 39c3a9cba9
commit 4572f0880e

@ -10,7 +10,7 @@
<div class="add-record-row-style">
<div class="li-box li-left"><span class="must-option-style">*</span>菜品图片</div>
<div class="li-box li-right">
<Upload :type="2" :multiple="true" title="点击上传" :option="{}" :canDownload="false"
<Upload :type="2" :multiple="false" title="点击上传" :option="{}" :canDownload="false"
ref="fileUpload"
:fileData="attachmentListJson"
@uploadComplete="uploadComplete"

@ -15,16 +15,47 @@
</div>
<div class="add-record-row-style">
<div class="li-box li-left">
<div>星期一</div>
<div>星期二</div>
<div>星期三</div>
<div>星期四</div>
<div>星期五</div>
<div>星期六</div>
<div>星期日</div>
<div :class="'day-select-style '+ (selectDay === 1?' selected-day':' un-selected-day')"
@click="changeDay(1)">星期一
</div>
<div :class="'day-select-style '+ (selectDay === 2?' selected-day':' un-selected-day')"
@click="changeDay(2)">星期二
</div>
<div :class="'day-select-style '+ (selectDay === 3?' selected-day':' un-selected-day')"
@click="changeDay(3)">星期三
</div>
<div :class="'day-select-style '+ (selectDay === 4?' selected-day':' un-selected-day')"
@click="changeDay(4)">星期四
</div>
<div :class="'day-select-style '+ (selectDay === 5?' selected-day':' un-selected-day')"
@click="changeDay(5)">星期五
</div>
<div :class="'day-select-style '+ (selectDay === 6?' selected-day':' un-selected-day')"
@click="changeDay(6)">星期六
</div>
<div :class="'day-select-style '+ (selectDay === 7?' selected-day':' un-selected-day')"
@click="changeDay(7)">星期日
</div>
</div>
<div class="li-box li-right">
<div class="food-list-content">
<vue-scroll :ops="listScroll" style="height:500px" class="score-list-div">
<div class="list-content-style">
<div v-for="food in foodList" :key="food.food_id"
:class="'food-info-style ' + (food.checked?'checked-style':'')"
@click="chooseFood(food)"
>
<div>{{food.food_name}}</div>
<Upload :type="2" :multiple="false" :option="{}" :canDownload="false"
:fileData="food.food_picture_json"
:canUpload="false"
:canView="false"
ref="fileUpload"
/>
</div>
</div>
</vue-scroll>
</div>
</div>
</div>
<div class="add-record-row-style button-row-style">
@ -38,14 +69,26 @@
</template>
<script>
import InterConfig from '../interConfig';
import {Spin, Button, Cascader, Input, InputNumber, Modal, Select, DatePicker,Icon,TimePicker} from 'ant-design-vue';
import {
Spin,
Button,
Cascader,
Input,
InputNumber,
Modal,
Select,
DatePicker,
Icon,
TimePicker,
Checkbox
} from 'ant-design-vue';
import Upload from '../../../../../../components/common/uploader/Upload.vue';
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
export default{
props:{
foodMenuId:{
type:String,
default:""
props: {
foodMenuId: {
type: String,
default: ""
},
},
created(){
@ -57,16 +100,27 @@
data(){
return {
locale,
foodList:[],
weekName:"",
weekAry:[],
startDate:"",//
endDate:"",//
pageLoading:false,
foodList: [],
weekName: "",
weekAry: [],
startDate: "",//
endDate: "",//
pageLoading: false,
listScroll: this.StaticParams.scrollOption,
selectDay: 1,
dayFoodList: [
{key: 1, foodIds: []},
{key: 2, foodIds: []},
{key: 3, foodIds: []},
{key: 4, foodIds: []},
{key: 5, foodIds: []},
{key: 6, foodIds: []},
{key: 7, foodIds: []},
]
}
},
methods:{
getFoodList:function () {
methods: {
getFoodList: function () {
let param = {
bureau_id: this.BaseConfig.person_info_my.bureau_id,
food_name: "",
@ -79,10 +133,46 @@
}], (result) => {
let resData = result[0].data;
if (resData.code === 2000) {
this.foodList = resData.data;
let foodList = resData.data;
for (let i = 0, len = foodList.length; i < len; i++) {
foodList[i]["checked"] = false;
}
this.foodList = foodList;
}
})
},
chooseFood: function (food) {
let foodIds = this.dayFoodList[this.selectDay - 1].foodIds;
let foodId = food.food_id;
food.checked = !food.checked;
if (food.checked) {
if (foodIds.indexOf(foodId) === -1) {
foodIds.push(foodId);
}
} else {
if (foodIds.indexOf(foodId) > -1) {
foodIds.splice(foodIds.indexOf(foodId), 1);
}
}
this.dayFoodList[this.selectDay - 1].foodIds = foodIds;
},
changeDay: function (day) {
this.selectDay = day;
//
this.buildSelected();
},
//
buildSelected:function () {
let compareFoods = this.dayFoodList[this.selectDay - 1].foodIds;
for (let i = 0, len = this.foodList.length; i < len; i++) {
let foodId = this.foodList[i].food_id;
if (compareFoods.indexOf(foodId) > -1) {
this.foodList[i].checked = true;
} else {
this.foodList[i].checked = false;
}
}
},
getInfo: function () {
let param = {
menu_id: this.$props.foodMenuId
@ -97,46 +187,74 @@
if (resData.code === 2000) {
let info = resData.data;
this.weekName = info.week_name;
this.startDate = info.week_start_date;
this.endDate = info.week_end_date;
this.weekAry = [this.startDate,this.endDate];
let detailMap = info.detail_map;
Object.keys(detailMap).forEach(key => {
let foodList = detailMap[key];
let index = key - 1;
for(let i = 0,len = foodList.length; i < len;i ++){
this.dayFoodList[index].foodIds.push(foodList[i].food_id)
}
})
this.buildSelected();
}
})
},
weekChange:function (value,dateString) {
if(dateString.length > 0){
weekChange: function (value, dateString) {
if (dateString.length > 0) {
this.startDate = dateString[0];
this.endDate = dateString[1];
this.weekAry = dateString;
}else {
} else {
this.startDate = "";
this.endDate = "";
this.weekAry = [];
}
},
submit:function () {
if(this.foodName.trim() === ""){
submit: function () {
if (this.weekName.trim() === "") {
Modal.warning({
title: "请输入周期名称",
content: "",
centered: true
})
return
}
if (this.startDate === "") {
Modal.warning({
title: "请输入菜品名称",
title: "请选择周期开始日期",
content: "",
centered: true
})
return
}
if(this.attachmentListJson.length === 0){
if (this.endDate === "") {
Modal.warning({
title: "请选择图片",
title: "请选择周期结束日期",
content: "",
centered: true
})
return
}
let param = {
food_name: this.foodName,
food_picture_json: JSON.stringify(this.attachmentListJson),
week_name: this.weekName,
week_start_date: this.startDate,
week_end_date: this.endDate,
person_id: this.BaseConfig.userInfo.person_id,
identity_id: this.BaseConfig.userInfo.identity_id,
bureau_id: this.BaseConfig.person_info_my.bureau_id,
}
if(this.$props.foodMenuId !== ""){
param.food_id = this.$props.foodMenuId;
param.weekday_food_ids_1 = this.getFoodIdsStr(0);
param.weekday_food_ids_2 = this.getFoodIdsStr(1);
param.weekday_food_ids_3 = this.getFoodIdsStr(2);
param.weekday_food_ids_4 = this.getFoodIdsStr(3);
param.weekday_food_ids_5 = this.getFoodIdsStr(4);
param.weekday_food_ids_6 = this.getFoodIdsStr(5);
param.weekday_food_ids_7 = this.getFoodIdsStr(6);
if (this.$props.foodMenuId !== "") {
param.menu_id = this.$props.foodMenuId;
}
this.InterfaceConfig.callInterface([{
url: InterConfig.saveMenu.url,
@ -155,22 +273,36 @@
this.cancel();
}
})
},
cancel:function () {
getFoodIdsStr:function (index) {
let str = "";
let idsAry = this.dayFoodList[index].foodIds;
if(idsAry && idsAry.length > 0){
for(let i = 0,len = idsAry.length;i < len;i ++){
str += idsAry[i] + ",";
}
if(str !== ""){
str = str.substring(0,str.length - 1);
}
}
return str;
},
cancel: function () {
this.$emit("cancel");
}
},
components:{
ASpin:Spin,
AInput:Input,
components: {
ASpin: Spin,
AInput: Input,
ASelect: Select,
ASelectOption: Select.Option,
Upload,
AButton:Button,
AButton: Button,
Modal,
ADateWeekPicker:DatePicker.WeekPicker,
ARangePicker:DatePicker.RangePicker,
ADateWeekPicker: DatePicker.WeekPicker,
ARangePicker: DatePicker.RangePicker,
ACheckbox: Checkbox,
AIcon: Icon
}
}
</script>
@ -196,10 +328,17 @@
.li-left {
width: 15%;
text-align: right;
.selected-day {
background-color: #31a8fa;
color: white;
}
.un-selected-day {
cursor: pointer;
}
}
.li-right {
width: 85%;
.person-list-content-style {
.food-list-content {
width: 700px;
height: 500px;
background-color: #ebebeb;
@ -208,24 +347,23 @@
height: 100%;
display: flex;
flex-wrap: wrap;
.honor-person-info {
width: auto;
height: 180px;
border: 1px solid #31a8fa;
margin: 0.5rem 0 0 0.5rem;
.food-info-style {
display: flex;
flex-direction: column;
justify-content: center;
.person-name {
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: center;
}
align-items: center;
margin-left: 0.5rem;
margin-top: 0.5rem;
/deep/ .img-style {
margin-right: 0 !important;
}
/*&:hover{*/
/*border: 1px solid #f2f2f2;*/
/*cursor: pointer;*/
/*}*/
}
.checked-style {
border: 1px solid #31a8fa;
}
}
}

Loading…
Cancel
Save