|
|
@@ -1,11 +1,23 @@
|
|
|
<template>
|
|
|
- <div class="pageIndexClass">
|
|
|
- <div>
|
|
|
+ <div class="user">
|
|
|
+ <div class="content">
|
|
|
<byTable :source="sourceList.data" :pagination="sourceList.pagination" :config="config" :loading="loading" highlight-current-row
|
|
|
:selectConfig="selectConfig" :action-list="[
|
|
|
|
|
|
]" @get-list="getList">
|
|
|
|
|
|
+ <template #prodTag="{ item }">
|
|
|
+ <div style="width: 100%">
|
|
|
+ <!-- <el-icon :size="16" style="cursor:pointer;margin-right: 5px;position:relative;top:5px" color="#409EFF" @click="handleEditTag(item)">
|
|
|
+ <Edit />
|
|
|
+ </el-icon> -->
|
|
|
+ <el-tag style="margin-right: 8px" type="success" v-for="(tag, index) in item.prodTags" closable :key="index"
|
|
|
+ @close="prodTagClose(index, item)">
|
|
|
+ {{ dictKeyValue(tag, contractTag) }}
|
|
|
+ </el-tag>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+
|
|
|
<template #list="{ item }">
|
|
|
<div style="width:100%">
|
|
|
<span v-for="(product ,index) in item.produceOrderDetailList" style="margin-right:15px">
|
|
|
@@ -28,6 +40,81 @@
|
|
|
|
|
|
</byTable>
|
|
|
</div>
|
|
|
+ <div class="schedule-right">
|
|
|
+ <div class="schedule-top">
|
|
|
+ <el-row>
|
|
|
+ <!-- <el-col :span="10" style="text-align: left">
|
|
|
+ <el-select v-model="status" style="width: 110px">
|
|
|
+ <el-option v-for="item in tableStatus" :key="item.value" :label="item.label" :value="item.value" />
|
|
|
+ </el-select>
|
|
|
+ <el-button type="info" style="margin-left: 8px" @click="clickToday()" plain>今日</el-button>
|
|
|
+ </el-col> -->
|
|
|
+ <el-col :span="24" style="text-align: center; height: 32px; line-height: 32px">
|
|
|
+ <div style="display: flex; justify-content: space-between">
|
|
|
+ <el-button @click="clickToday()" plain>今日</el-button>
|
|
|
+ <el-button :icon="ArrowLeftBold" @click="prevMonth()" />
|
|
|
+ <span style="font-weight: 700">{{ month }}</span>
|
|
|
+ <el-button :icon="ArrowRightBold" @click="nextMonth()" />
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <!-- <el-col :span="10" style="text-align: right">
|
|
|
+ <el-button type="primary" @click="newSchedule()">新建日程</el-button>
|
|
|
+ </el-col> -->
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ <div class="schedule-bottom">
|
|
|
+ <el-calendar v-model="today" ref="calendar">
|
|
|
+ <template #date-cell="{ data }">
|
|
|
+ <div>
|
|
|
+ <div :class="'title ' + (data.isSelected ? 'is-selected' : '')" :style="data.isSelected ? ' background-color: #eeeeee;' : ''">
|
|
|
+ <span :class="data.isSelected ? 'select-title' : ''">{{ data.day.substr(8, 10) }}</span>
|
|
|
+ <span style="position: absolute; right: 4px; top: 4px; font-size: 14px; color: black" v-if="judgeDay(data.day)">
|
|
|
+ {{ dateList[data.day].length }}条
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div v-if="judgeDay(data.day)">
|
|
|
+ <div v-for="(item, index) in dateList[data.day]" :key="index">
|
|
|
+ <el-popover placement="right" :width="400" trigger="hover">
|
|
|
+ <template #reference>
|
|
|
+ <div class="line-class" :style="getColor(item)">
|
|
|
+ <span style="font-size: 12px; margin-left: 8px; color: black">{{ item.title }}</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <div>
|
|
|
+ <el-form :model="item" label-width="80px" style="margin-top: 18px">
|
|
|
+ <el-form-item label="主题:">
|
|
|
+ <span>{{ item.title }}</span>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="时间:">
|
|
|
+ <div>
|
|
|
+ <span v-if="item.startDate">{{ moment(item.startDate.substr(5, 16), "MM-DD HH:mm:ss").format("MM月DD日 HH:mm") }}</span>
|
|
|
+ <span> - </span>
|
|
|
+ <span v-if="item.endDate">{{ moment(item.endDate.substr(5, 16), "MM-DD HH:mm:ss").format("MM月DD日 HH:mm") }}</span>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="颜色:">
|
|
|
+ <div :style="' width: 24px; height: 24px; border-radius: 50px; margin-top: 2px; background-color: ' + item.color">
|
|
|
+ <el-icon style="color: #fff; font-size: 20px; margin: 2px 0 0 2px">
|
|
|
+ <Check />
|
|
|
+ </el-icon>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="提醒:">
|
|
|
+ <span>{{ getLabel(item.noticeType, noticeType) }}</span>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div style="border-top: 1px solid #ccc; text-align: center; padding-top: 16px">
|
|
|
+ <el-button type="primary" @click="clickDetail(item)" text>查看详情</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-popover>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-calendar>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
<el-dialog :title="modalType == 'add' ? '添加店铺' : '编辑店铺'" v-model="dialogVisible" width="500px" destroy-on-close>
|
|
|
<byForm :formConfig="formConfig" :formOption="formOption" v-model="formData.data" :rules="rules" ref="formDom" v-loading="submitLoading">
|
|
|
</byForm>
|
|
|
@@ -55,7 +142,14 @@
|
|
|
<script setup>
|
|
|
import byTable from "@/components/byTable/index";
|
|
|
import byForm from "@/components/byForm/index";
|
|
|
+import moment from "moment";
|
|
|
+import * as date from "@/utils/date.js";
|
|
|
+import { ArrowLeftBold, ArrowRightBold } from "@element-plus/icons-vue";
|
|
|
+
|
|
|
const { proxy } = getCurrentInstance();
|
|
|
+const contractTag = computed(
|
|
|
+ () => proxy.useUserStore().allDict["contract_prod_tag"]
|
|
|
+);
|
|
|
const loading = ref(false);
|
|
|
const submitLoading = ref(false);
|
|
|
const sourceList = ref({
|
|
|
@@ -75,6 +169,11 @@ const sourceList = ref({
|
|
|
const treeData = ref([]);
|
|
|
const dialogVisible = ref(false);
|
|
|
const modalType = ref("add");
|
|
|
+const status = ref("0");
|
|
|
+const today = ref(moment().format("yyyy-MM-DD"));
|
|
|
+const dateList = ref({});
|
|
|
+const month = ref(moment().format("yyyy年MM月"));
|
|
|
+const calendar = ref(null);
|
|
|
const statusData = ref([
|
|
|
{
|
|
|
label: "未开始",
|
|
|
@@ -154,9 +253,17 @@ const config = computed(() => {
|
|
|
},
|
|
|
{
|
|
|
attrs: {
|
|
|
+ label: "生产指示",
|
|
|
+ slot: "prodTag",
|
|
|
+ "min-width": 220,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ attrs: {
|
|
|
slot: "list",
|
|
|
label: "产品生产进度",
|
|
|
// prop: "name",
|
|
|
+ "min-width": 300,
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
@@ -246,6 +353,13 @@ const getList = async (req) => {
|
|
|
sourceList.value.pagination = { ...sourceList.value.pagination, ...req };
|
|
|
loading.value = true;
|
|
|
proxy.post("/produceOrder/page", sourceList.value.pagination).then((res) => {
|
|
|
+ res.rows.forEach((x) => {
|
|
|
+ if (x.prodTag) {
|
|
|
+ x.prodTags = x.prodTag.split(",");
|
|
|
+ } else {
|
|
|
+ x.prodTags = [];
|
|
|
+ }
|
|
|
+ });
|
|
|
sourceList.value.data = res.rows;
|
|
|
sourceList.value.pagination.total = res.total;
|
|
|
setTimeout(() => {
|
|
|
@@ -331,13 +445,112 @@ const submitProduction = () => {
|
|
|
});
|
|
|
});
|
|
|
};
|
|
|
+
|
|
|
+const prodTagClose = (index, row) => {
|
|
|
+ row.prodTags.splice(index, 1);
|
|
|
+ proxy
|
|
|
+ .post("/contract/updateProductionTag", {
|
|
|
+ id: row.contractId,
|
|
|
+ prodTag: row.prodTags.join(","),
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ getList();
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+const clickToday = () => {
|
|
|
+ console.log("clickToday", sourceList.value.pagination);
|
|
|
+ today.value = moment().format("yyyy-MM-DD");
|
|
|
+ month.value = moment().format("yyyy年MM月");
|
|
|
+};
|
|
|
+const judgeDay = (day) => {
|
|
|
+ return dateList.value[day] && dateList.value[day].length > 0;
|
|
|
+};
|
|
|
+const getColor = (item) => {
|
|
|
+ let text = "background-color: " + item.color + "6b;";
|
|
|
+ if (item.startDate && item.date === item.startDate.substr(0, 10)) {
|
|
|
+ text += " border-left: 5px solid " + item.color;
|
|
|
+ }
|
|
|
+ return text;
|
|
|
+};
|
|
|
+
|
|
|
+const getLabel = (val, list) => {
|
|
|
+ let text = "";
|
|
|
+ if (list && list.length > 0) {
|
|
|
+ let data = list.filter((item) => item.value == val);
|
|
|
+ if (data && data.length > 0) {
|
|
|
+ text = data[0].label;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return text;
|
|
|
+};
|
|
|
+const selectDate = (val) => {
|
|
|
+ calendar.value.selectDate(val);
|
|
|
+};
|
|
|
+
|
|
|
+const prevMonth = () => {
|
|
|
+ month.value = moment(
|
|
|
+ moment(month.value, "yyyy年MM月").add(-1, "month").calendar()
|
|
|
+ ).format("yyyy年MM月");
|
|
|
+ console.log("prevMonth", month.value);
|
|
|
+ selectDate("prev-month");
|
|
|
+ // getList();
|
|
|
+};
|
|
|
+const nextMonth = () => {
|
|
|
+ month.value = moment(
|
|
|
+ moment(month.value, "yyyy年MM月").add(+1, "month").calendar()
|
|
|
+ ).format("yyyy年MM月");
|
|
|
+ console.log("nextMonth", month.value);
|
|
|
+ selectDate("next-month");
|
|
|
+ // getList();
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
::v-deep(.el-progress__text) {
|
|
|
font-size: 14px !important;
|
|
|
}
|
|
|
-.content {
|
|
|
- padding: 20px;
|
|
|
+.user {
|
|
|
+ padding: 10px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ .schedule-right {
|
|
|
+ width: 400px;
|
|
|
+ .schedule-top {
|
|
|
+ width: 100%;
|
|
|
+ background: #fff;
|
|
|
+ padding: 20px;
|
|
|
+ }
|
|
|
+ .schedule-bottom {
|
|
|
+ width: 100%;
|
|
|
+ background: #fff;
|
|
|
+ height: calc(100vh - 100px - 20px - 83px);
|
|
|
+ padding: 20px;
|
|
|
+ margin-top: 10px;
|
|
|
+ overflow-y: auto;
|
|
|
+ &::-webkit-scrollbar {
|
|
|
+ width: 0px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .line-class {
|
|
|
+ height: 18px;
|
|
|
+ line-height: 18px;
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ -o-text-overflow: ellipsis;
|
|
|
+ margin: 1px 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .content {
|
|
|
+ width: calc(100% - 410px);
|
|
|
+ }
|
|
|
+}
|
|
|
+::v-deep(.el-calendar__header) {
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+::v-deep(.el-calendar__body) {
|
|
|
+ padding: 0;
|
|
|
}
|
|
|
</style>
|
cz