提交更改

chengxiangling

2025-05-12 96872a90ce8eb5c3395c31bbebcb93bd7a36027a

 src/views/basicData/calendar/index.vue

@@ -1,34 +1,34 @@
<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="描述" prop="description">
        <el-input
          v-model="queryParams.description"
          placeholder="请输入描述"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="日历生效日期" prop="effectiveDate">
        <el-date-picker clearable
          v-model="queryParams.effectiveDate"
          type="date"
          value-format="YYYY-MM-DD"
          placeholder="请选择日历生效日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="失效日期" prop="expiringDate">
        <el-date-picker clearable
          v-model="queryParams.expiringDate"
          type="date"
          value-format="YYYY-MM-DD"
          placeholder="请选择失效日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    <el-form
      class="responsive-form"
      :model="queryParams"
      ref="queryRef"
      :inline="true"
      v-show="showSearch"
      label-width="68px"
    >
      <el-row type="flex" justify="left">
        <el-col :span="6">
          <el-form-item label="日历描述" prop="description">
            <el-input
              style="width: 140px"
              v-model="queryParams.description"
              placeholder="请输入描述关键词"
              clearable
              @keyup.enter="handleQuery"
            />
          </el-form-item>
        </el-col>
        <el-col :span="18" style="text-align: right">
          <el-form-item class="column-with-margin">
            <el-button type="primary" icon="Search" @click="handleQuery"
              >查询</el-button
            >
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <el-row :gutter="10" class="mb8">
@@ -38,8 +38,9 @@
          plain
          icon="Plus"
          @click="handleAdd"
          v-hasPermi="['core:calendar:add']"
        >新增</el-button>
          v-hasPermi="['aps:calendar:add']"
          >新增</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
@@ -48,8 +49,9 @@
          icon="Edit"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['core:calendar:edit']"
        >修改</el-button>
          v-hasPermi="['aps:calendar:update']"
          >修改</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
@@ -58,86 +60,240 @@
          icon="Delete"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['core:calendar:remove']"
        >删除</el-button>
          v-hasPermi="['aps:calendar:remove']"
          >删除</el-button
        >
      </el-col>
      <el-col :span="1.5">
      <!-- <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="Download"
          @click="handleExport"
          v-hasPermi="['core:calendar:export']"
        >导出</el-button>
      </el-col>
      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
          >导出</el-button
        >
      </el-col> -->
      <right-toolbar
        v-model:showSearch="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="calendarList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="${comment}" align="center" prop="id" />
      <el-table-column label="描述" align="center" prop="description" />
      <el-table-column label="类型，周工作/节假日" align="center" prop="type" />
      <el-table-column label="日历生效日期" align="center" prop="effectiveDate" width="180">
        <template #default="scope">
          <span>{{ parseTime(scope.row.effectiveDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="失效日期" align="center" prop="expiringDate" width="180">
        <template #default="scope">
          <span>{{ parseTime(scope.row.expiringDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="日历内容" align="center" prop="content" />
      <el-table-column label="适用工厂" align="center" prop="applicableFactory" />
      <el-table-column label="适用车间" align="center" prop="applicableWorkshop" />
      <el-table-column label="适用工序" align="center" prop="applicableProcess" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['core:calendar:edit']">修改</el-button>
          <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['core:calendar:remove']">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <pagination
      v-show="total>0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
    <HxlhTable
      style="width: 100%"
      :columns="columns"
      :data="calendarList"
      :loading="loading"
      :height="height"
      ref="tableRef"
      :page="page"
      @changePageNo="changePageNo"
      @changePageSize="changePageSize"
      @on-checkbox="handleCheckboxChange"
      class="auto-height-grid"
    >
      <template #status="{ row }">
        <vxe-tag v-if="row.type === '1'" status="primary">周工作日</vxe-tag>
        <vxe-tag v-if="row.type === '2'" status="success">节假日</vxe-tag>
      </template>
      <template #mark="{ row }">
        <div v-if="row.type === '1'">
          <span
            v-for="(item, index) in JSON.parse(row.content.value).weekdays"
            :key="index"
          >
            <span v-if="item.work === 'y'" status="success" class="mart5"
              >{{ item.chineseName }}: 工作日;&nbsp;</span
            >
            <span v-if="item.work === 'n'" status="info" class="mart5"
              >{{ item.chineseName }}: 非工作日;&nbsp;</span
            >
          </span>
          <!-- <div v-for="(item, index) in JSON.parse(row.content.value).weekdays" :key="index">
              <vxe-tag v-if="item.work==='y'" status="success" class="mart5">{{item.chineseName}}: 工作日;&nbsp;</vxe-tag>
              <vxe-tag v-if="item.work==='n'" status="info" class="mart5">{{item.chineseName}}: 非工作日;&nbsp;</vxe-tag>
            </div> -->
        </div>
        <div v-if="row.type === '2'">
          <div>
            {{ JSON.parse(row.content.value).holidays.startdate }}至{{
              JSON.parse(row.content.value).holidays.enddate
            }}
          </div>
        </div>
      </template>
      <template #buttons="{ row }">
        <vxe-button
          mode="text"
          @click="handleUpdate(row)"
          v-hasPermi="['aps:calendar:update']"
          >修改</vxe-button
        >
        <vxe-button
          mode="text"
          @click="handleDelete(row)"
          v-hasPermi="['aps:calendar:remove']"
          >删除</vxe-button
        >
      </template>
    </HxlhTable>

    <!-- 添加或修改日历管理对话框 -->
    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
      <el-form ref="calendarRef" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="描述" prop="description">
      <el-form
        ref="calendarRef"
        :model="form"
        :rules="rules"
        label-width="105px"
      >
        <el-form-item label="日历描述" prop="description">
          <el-input v-model="form.description" placeholder="请输入描述" />
        </el-form-item>
        <el-form-item label="日历生效日期" prop="effectiveDate">
          <el-date-picker clearable
        <el-form-item label="日历类型" prop="type">
          <el-radio-group v-model="form.type" @change="handleSwitchType">
            <el-radio :label="'1'">周工作</el-radio>
            <el-radio :label="'2'">节假日</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="生效时间" prop="effectiveDate">
          <el-date-picker
            clearable
            v-model="form.effectiveDate"
            type="date"
            value-format="YYYY-MM-DD"
            placeholder="请选择日历生效日期">
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="失效日期" prop="expiringDate">
          <el-date-picker clearable
        <el-form-item label="失效时间" prop="expiringDate">
          <el-date-picker
            clearable
            v-model="form.expiringDate"
            type="date"
            value-format="YYYY-MM-DD"
            placeholder="请选择失效日期">
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="日历内容" prop="content">
          <el-input v-model="form.content" type="textarea" placeholder="请输入内容" />
        <div v-if="form.type === '1'">
          <div class="title_bar_line">
            <div class="line_short"></div>
            <div>周工作设置</div>
            <div class="line_long"></div>
          </div>
          <div
            class="week_flex"
            v-for="(item, index) in weekDaysSettingList"
            :key="index"
          >
            <div class="week_flex_item">{{ item.chineseName }}</div>
            <div class="week_flex_item">
              <el-radio-group v-model="item.work">
                <el-radio :label="'y'">工作日</el-radio>
                <el-radio :label="'n'">非工作日</el-radio>
              </el-radio-group>
            </div>
          </div>
        </div>
        <div v-if="form.type === '2'">
          <div class="title_bar_line">
            <div class="line_short"></div>
            <div>节假日设置</div>
            <div class="line_long"></div>
          </div>
          <div class="week_flex mt20">
            <div class="week_flex_item">节日开始时间</div>
            <div class="week_flex_item">
              <el-date-picker
                clearable
                v-model="holidays.startdate"
                type="date"
                value-format="YYYY-MM-DD"
                placeholder="选择日期"
              >
              </el-date-picker>
            </div>
          </div>
          <div class="week_flex mt20">
            <div class="week_flex_item">节日结束时间</div>
            <div class="week_flex_item">
              <el-date-picker
                clearable
                v-model="holidays.enddate"
                type="date"
                value-format="YYYY-MM-DD"
                placeholder="选择日期"
              >
              </el-date-picker>
            </div>
          </div>
        </div>
        <el-form-item
          label="适用工厂"
          prop="applicableFactory"
          class="factory_use_item"
        >
          <el-select
            clearable
            v-model="form.applicableFactory"
            style="width: 160px"
            placeholder="请输入适用工厂"
            @change="changePlant($event)"
          >
            <el-option
              v-for="plant in plantList"
              :key="plant.id"
              :label="plant.plantName"
              :value="plant.plantCode"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="适用车间"
          prop="applicableWorkshop"
          class="factory_use_item"
        >
          <el-select
            clearable
            v-model="form.applicableWorkshop"
            style="width: 160px"
            placeholder="请输入适用车间"
          >
            <el-option
              v-for="shop in shopList"
              :key="shop.id"
              :label="shop.shopName"
              :value="shop.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="适用工序"
          prop="applicableProcess"
          class="factory_use_item"
        >
          <el-select
            clearable
            v-model="form.applicableProcess"
            style="width: 160px"
            placeholder="请输入适用工序"
          >
            <el-option
              v-for="process in processList"
              :key="process.id"
              :label="process.processName"
              :value="process.processName"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="submitForm">保存</el-button>
        </div>
      </template>
    </el-dialog>
@@ -145,10 +301,20 @@
</template>

<script setup name="Calendar">
import { listCalendar, getCalendar, delCalendar, addCalendar, updateCalendar } from "@/api/core/calendar";

import HxlhTable from "@/components/HxlhTable";
import {
  listCalendar,
  getCalendar,
  delCalendar,
  addCalendar,
  updateCalendar,
} from "@/api/basicData/calendar";
import axios from "axios";
import { listAll_plant } from "@/api/basicData/plant";
import { listAll_shop, listAps_shop } from "@/api/basicData/shop";
import { selectProcessNameList } from "@/api/basicData/processRoute.js";
const { proxy } = getCurrentInstance();

const tableRef = ref();
const calendarList = ref([]);
const open = ref(false);
const loading = ref(true);
@@ -158,9 +324,10 @@
const multiple = ref(true);
const total = ref(0);
const title = ref("");

const data = reactive({
  form: {},
  form: {
    type: "1",
  },
  queryParams: {
    pageNum: 1,
    pageSize: 10,
@@ -174,19 +341,226 @@
    applicableProcess: null,
  },
  rules: {
  }
    description: [
      {
        required: true,
        message: "请输入日历描述",
        trigger: "blur",
      },
    ],
    type: [
      {
        required: true,
        message: "请选择日历类型",
        trigger: "blur",
      },
    ],
    effectiveDate: [
      {
        required: true,
        message: "请选择日历生效时间",
        trigger: "blur",
      },
    ],
    expiringDate: [
      {
        required: true,
        message: "请选择日历失效时间",
        trigger: "blur",
      },
    ],
    applicableFactory: [
      {
        required: true,
        message: "请选择适用工厂",
        trigger: "blur",
      },
    ],
  },
});

const { queryParams, form, rules } = toRefs(data);
const dateType = ref("周工作");
const dateTypeList = ref([
  {
    name: "周工作",
    label: "1",
  },
  {
    name: "节假日",
    label: "2",
  },
]);
const typeRadioNumber = ref(1);
const weekDaysSettingList = ref([
  {
    day: "Monday",
    chineseName: "星期一",
    work: "y",
  },
  {
    day: "Tuesday",
    chineseName: "星期二",
    work: "y",
  },
  {
    day: "Wednesday",
    chineseName: "星期三",
    work: "y",
  },
  {
    day: "Thursday",
    chineseName: "星期四",
    work: "y",
  },
  {
    day: "Friday",
    chineseName: "星期五",
    work: "y",
  },
  {
    day: "Saturday",
    chineseName: "星期六",
    work: "y",
  },
  {
    day: "Sunday",
    chineseName: "星期日",
    work: "y",
  },
]);
const holidays = ref({
  startdate: "",
  enddate: "",
});
const plantList = ref([]);
const shopList = ref([]);
const allShopList = ref([]);
const processList = ref([]);
const height = ref(document.documentElement.clientHeight - 220 + "px;");
// 表格配置-列表
const columns = ref([
  { type: "checkbox", width: 60, align: "center" },
  {
    title: "日历描述",
    field: "description",
    width: 150,
    align: "center",
  },
  {
    title: "日历类型",
    field: "type",
    width: 200,
    align: "center",
    slots: { default: "status" },
  },
  {
    title: "日历生效时间",
    field: "effectiveDate",
    width: 200,
    align: "center",
  },
  {
    title: "日历失效时间",
    field: "expiringDate",
    width: 200,
    align: "center",
  },
  {
    title: "日历内容",
    field: "content",
    width: 230,
    align: "center",
    slots: { default: "mark" },
  },
  {
    title: "适用工厂",
    field: "applicableFactory",
    width: 200,
    align: "center",
    formatter: ({ cellValue, row, column }) => {
      if (cellValue) {
        for (let i = 0; i < plantList.value.length; i++) {
          if (cellValue === plantList.value[i].plantCode) {
            return plantList.value[i].plantName;
          }
        }
      }
    },
  },
  {
    title: "适用车间",
    field: "applicableWorkshop",
    width: 200,
    align: "center",
    formatter: ({ cellValue, row, column }) => {
      if (cellValue) {
        for (let i = 0; i < shopList.value.length; i++) {
          if (cellValue === shopList.value[i].id) {
            return shopList.value[i].shopName;
          }
        }
      }
      return "";
    },
  },
  {
    title: "适用工序",
    field: "applicableProcess",
    width: 200,
    align: "center",
  },
  {
    title: "创建者",
    field: "createBy",
    width: 200,
    align: "center",
  },
  {
    title: "创建时间",
    field: "createTime",
    width: 200,
    align: "center",
  },
  {
    title: "操作",
    width: 100,
    fixed: "right",
    slots: { default: "buttons" },
    align: "center",
  },
]);
// 分页属性
const page = ref({
  total: 0,
  current: 1,
  size: 10,
});

/** 查询日历管理列表 */
function getList() {
  loading.value = true;
  listCalendar(queryParams.value).then(response => {
  listCalendar(queryParams.value).then((response) => {
    calendarList.value = response.rows;
    total.value = response.total;
    page.value.total = response.total;
    loading.value = false;
  });
  axios
    .all([
      /** 查询工厂列表 */
      listAll_plant({}),
      /** 查询车间列表 */
      listAll_shop({}),
    ])
    .then(
      axios.spread((response1, response2) => {
        plantList.value = response1.data;
        shopList.value = response2.data;
        loading.value = false;
      })
    )
    .catch((error) => {
      console.error("请求出错:", error);
    });
}

// 取消按钮
@@ -200,7 +574,7 @@
  form.value = {
    id: null,
    description: null,
    type: null,
    type: "1",
    effectiveDate: null,
    expiringDate: null,
    content: null,
@@ -210,7 +584,7 @@
    createBy: null,
    createTime: null,
    updateBy: null,
    updateTime: null
    updateTime: null,
  };
  proxy.resetForm("calendarRef");
}
@@ -229,24 +603,41 @@

// 多选框选中数据
function handleSelectionChange(selection) {
  ids.value = selection.map(item => item.id);
  ids.value = selection.map((item) => item.id);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
}

/** 新增按钮操作 */
function handleAdd() {
async function handleAdd() {
  reset();
  open.value = true;
  title.value = "添加日历管理";
}

/** 选择工厂后事件 加载车间 和 工序 **/
function changePlant(plant) {
  listAps_shop({ plantCode: plant }).then((response) => {
    shopList.value = response.rows;
  });
  selectProcessNameList({ orgCode: plant }).then((response) => {
    processList.value = response.rows;
  });
}
/** 修改按钮操作 */
function handleUpdate(row) {
  reset();
  const _id = row.id || ids.value
  getCalendar(_id).then(response => {
  const _id = row.id || ids.value;
  getCalendar(_id).then((response) => {
    form.value = response.data;
    // form.value.content = JSON.parse(response.data.content.value);
    if (form.value.type === "1") {
      weekDaysSettingList.value = JSON.parse(
        response.data.content.value
      ).weekdays;
    } else if (form.value.type === "2") {
      holidays.value = JSON.parse(response.data.content.value).holidays;
    }

    open.value = true;
    title.value = "修改日历管理";
  });
@@ -254,20 +645,60 @@

/** 提交按钮 */
function submitForm() {
  proxy.$refs["calendarRef"].validate(valid => {
  proxy.$refs["calendarRef"].validate((valid) => {
    if (valid) {
      if (form.value.id != null) {
        updateCalendar(form.value).then(response => {
          proxy.$modal.msgSuccess("修改成功");
          open.value = false;
          getList();
        });
        if (form.value.type === "1") {
          updateCalendar({
            ...form.value,
            content: {
              weekdays: weekDaysSettingList.value,
            },
            applicableWorkshop: form.value.applicableWorkshop,
            applicableProcess: form.value.applicableProcess,
          }).then((response) => {
            proxy.$modal.msgSuccess("修改成功");
            open.value = false;
            getList();
          });
        } else if (form.value.type === "2") {
          updateCalendar({
            ...form.value,
            content: {
              holidays: holidays.value,
            },
            applicableWorkshop: form.value.applicableWorkshop,
            applicableProcess: form.value.applicableProcess,
          }).then((response) => {
            proxy.$modal.msgSuccess("修改成功");
            open.value = false;
            getList();
          });
        }
      } else {
        addCalendar(form.value).then(response => {
          proxy.$modal.msgSuccess("新增成功");
          open.value = false;
          getList();
        });
        if (form.value.type === "1") {
          addCalendar({
            ...form.value,
            content: {
              weekdays: weekDaysSettingList.value,
            },
          }).then((response) => {
            proxy.$modal.msgSuccess("新增成功");
            open.value = false;
            getList();
          });
        } else if (form.value.type === "2") {
          addCalendar({
            ...form.value,
            content: {
              holidays: holidays.value,
            },
          }).then((response) => {
            proxy.$modal.msgSuccess("新增成功");
            open.value = false;
            getList();
          });
        }
      }
    }
  });
@@ -276,20 +707,112 @@
/** 删除按钮操作 */
function handleDelete(row) {
  const _ids = row.id || ids.value;
  proxy.$modal.confirm('是否确认删除日历管理编号为"' + _ids + '"的数据项？').then(function() {
    return delCalendar(_ids);
  }).then(() => {
    getList();
    proxy.$modal.msgSuccess("删除成功");
  }).catch(() => {});
  proxy.$modal
    .confirm('是否确认删除日历管理编号为"' + _ids + '"的数据项？')
    .then(function () {
      return delCalendar(_ids);
    })
    .then(() => {
      getList();
      proxy.$modal.msgSuccess("删除成功");
    })
    .catch(() => {});
}

/** 导出按钮操作 */
function handleExport() {
  proxy.download('core/calendar/export', {
    ...queryParams.value
  }, `calendar_${new Date().getTime()}.xlsx`)
  proxy.download(
    "core/calendar/export",
    {
      ...queryParams.value,
    },
    `calendar_${new Date().getTime()}.xlsx`
  );
}

getList();
function handleSwitchType(e) {
  typeRadioNumber.value = e;
  form.value.type = e;
  form.value.effectiveDate = null;
  form.value.expiringDate = null;
  form.value.content = null;
  form.value.applicableFactory = null;
  form.value.applicableWorkshop = null;
  form.value.applicableProcess = null;
}
function changePageNo(currentPage) {
  queryParams.value.pageNum = currentPage;
  page.value.current = currentPage;
  getList();
}
function changePageSize(pageSize) {
  page.value.current = 1;
  queryParams.value.pageNum = 1;
  queryParams.value.pageSize = pageSize;
  getList();
}
// 多选框选中数据
const handleCheckboxChange = (data) => {
  ids.value = data.records.map((item) => item.id);
  single.value = data.records.length !== 1;
  multiple.value = !data.records.length;
};
onMounted(() => {
  getList();
});
</script>
<style lang="scss" scoped>
.column-with-margin {
  margin-right: 0px;
}
.title_bar_line {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  color: #333;
  margin-bottom: 10px;
  .line_short {
    width: 5%;
    height: 1px;
    margin-right: 20px;
    border-top: 1px solid #ddd;
  }
  .line_long {
    width: 60%;
    height: 1px;
    margin-left: 20px;
    border-top: 1px solid #ddd;
  }
}
.week_flex {
  display: flex;
  justify-content: flex-start;
  align-content: center;
  color: #606266;
  font-weight: 700;
  margin-left: 20px;
  &.mt20 {
    margin-top: 20px;
    margin-left: 0 !important;
  }
  .week_flex_item {
    &:nth-child(1) {
      margin-top: 5px;
    }
    &:nth-child(2) {
      margin-left: 20px;
    }
  }
}
.factory_use_item {
  margin-top: 10px;
}
.mart5 {
  margin-top: 5px;
}
.custom-height {
  height: 200px; /* 或者使用 min-height */
}
.auto-height-grid .xe-body .xe-body--row {
  height: auto; /* 或者使用 min-height */
}
</style>