提交日历前端页面修改和字段对接

CD配唱片

2025-04-23 03812f7165d2c9e55172069be692167ce94d1c0d

提交日历前端页面修改和字段对接

 .env.development

@@ -9,4 +9,5 @@

# 标识本地开发服务，用于GateWay转发到本地服务
# 配合后端服务
VITE_APP_LOCAL = 'int'
# VITE_APP_LOCAL = 'int'
VITE_APP_LOCAL = 'hjy'

 src/views/basicData/calendar/index.vue

@@ -1,37 +1,78 @@
<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-form
      class="responsive-form"
      :model="queryParams"
      ref="queryRef"
      :inline="true"
      v-show="showSearch"
      label-width="68px"
    >
      <el-row type="flex" justify="right">
        <el-form-item label="日历描述" prop="description">
        <el-input
            style="width: 140px"
          v-model="queryParams.description"
          placeholder="请输入描述"
            placeholder="请输入描述关键词"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="日历生效日期" prop="effectiveDate">
        <el-date-picker clearable
        <el-form-item label="日历类型" prop="effectiveDate">
          <el-select clearable v-model="dateType" style="width: 90px">
            <el-option
              v-for="(item, index) of dateTypeList"
              :key="index"
              :label="item.name"
              :value="item.name"
              >{{ item.name }}</el-option
            >
          </el-select>
        </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="请选择日历生效日期">
            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="queryParams.expiringDate"
          type="date"
          value-format="YYYY-MM-DD"
          placeholder="请选择失效日期">
        </el-date-picker>
        </el-date-picker> -->
          <el-input
            style="width: 180px"
            v-model="queryParams.description"
            placeholder="请输入工厂关键词"
            clearable
            @keyup.enter="handleQuery"
          />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
      </el-row>
      <el-row type="flex" justify="end">
        <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-button
            type="success"
            icon="Plus"
            @click="handleAdd"
            v-hasPermi="['core:calendar:add']"
            >新增日历</el-button
          >
      </el-form-item>
      </el-row>
    </el-form>

    <el-row :gutter="10" class="mb8">
    <!-- <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
@@ -39,7 +80,8 @@
          icon="Plus"
          @click="handleAdd"
          v-hasPermi="['core:calendar:add']"
        >新增</el-button>
          >新增</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
@@ -49,7 +91,8 @@
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['core:calendar:edit']"
        >修改</el-button>
          >修改</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
@@ -59,7 +102,8 @@
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['core:calendar:remove']"
        >删除</el-button>
          >删除</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
@@ -68,34 +112,95 @@
          icon="Download"
          @click="handleExport"
          v-hasPermi="['core:calendar:export']"
        >导出</el-button>
          >导出</el-button
        >
      </el-col>
      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>
      <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">
    <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">
        <template #default="scope">
          <span>{{ parseTime(scope.row.effectiveDate, '{y}-{m}-{d}') }}</span>
          <!-- <dict-tag :options="sys_normal_disable" :value="scope.row.status" /> -->
          <el-tag
          :type="scope.row.type === '1' ? '' : 'success'"
          disable-transitions
          >{{ scope.row.type }}</el-tag
        >
        </template>
      </el-table-column>
      <el-table-column label="失效日期" align="center" prop="expiringDate" width="180">
      <el-table-column
        label="日历生效时间"
        align="center"
        prop="effectiveDate"
        width="180"
      >
        <template #default="scope">
          <span>{{ parseTime(scope.row.expiringDate, '{y}-{m}-{d}') }}</span>
          <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">
      <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" prop="createBy" />
      <el-table-column label="创建时间" align="center" prop="createTime" />
      <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>
          <el-button
            link
            type="primary"
            icon="Edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['core:calendar:edit']"
            >修改</el-button
          >
          <el-button
            link
            type="danger"
            icon="Delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['core:calendar:remove']"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
@@ -110,34 +215,212 @@

    <!-- 添加或修改日历管理对话框 -->
    <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="80px"
      >
        <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="typeRadioNumber" @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 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" @change="handleSetWorkDays">
              <el-radio :label="'y'">工作日</el-radio>
              <el-radio :label="'n'">非工作日</el-radio>
            </el-radio-group>
          </div>
        </div>
        <!-- <div class="week_flex">
          <div class="week_flex_item">星期二</div>
          <div class="week_flex_item">
            <el-radio-group v-model="tueType">
              <el-radio :label="1">工作日</el-radio>
              <el-radio :label="2">非工作日</el-radio>
            </el-radio-group>
          </div>
        </div>
        <div class="week_flex">
          <div class="week_flex_item">星期三</div>
          <div class="week_flex_item">
            <el-radio-group v-model="wedType">
              <el-radio :label="1">工作日</el-radio>
              <el-radio :label="2">非工作日</el-radio>
            </el-radio-group>
          </div>
        </div>
        <div class="week_flex">
          <div class="week_flex_item">星期四</div>
          <div class="week_flex_item">
            <el-radio-group v-model="thuType">
              <el-radio :label="1">工作日</el-radio>
              <el-radio :label="2">非工作日</el-radio>
            </el-radio-group>
          </div>
        </div>
        <div class="week_flex">
          <div class="week_flex_item">星期五</div>
          <div class="week_flex_item">
            <el-radio-group v-model="friType">
              <el-radio :label="1">工作日</el-radio>
              <el-radio :label="2">非工作日</el-radio>
            </el-radio-group>
          </div>
        </div>
        <div class="week_flex">
          <div class="week_flex_item">星期六</div>
          <div class="week_flex_item">
            <el-radio-group v-model="satType">
              <el-radio :label="1">工作日</el-radio>
              <el-radio :label="2">非工作日</el-radio>
            </el-radio-group>
          </div>
        </div>
        <div class="week_flex">
          <div class="week_flex_item">星期日</div>
          <div class="week_flex_item">
            <el-radio-group v-model="sunType">
              <el-radio :label="1">工作日</el-radio>
              <el-radio :label="2">非工作日</el-radio>
            </el-radio-group>
          </div>
        </div> -->
        <el-form-item
          label="适用工厂"
          prop="applicableFactory"
          class="factory_use_item"
        >
          <el-select
            clearable
            v-model="dateType"
            style="width: 160px"
            placeholder="请输入适用工厂"
          >
            <el-option
              v-for="(item, index) of dateTypeList"
              :key="index"
              :label="item.name"
              :value="item.name"
              >{{ item.name }}</el-option
            >
          </el-select>
        </el-form-item>
        <el-form-item
          label="适用车间"
          prop="applicableWorkshop"
          class="factory_use_item"
        >
          <el-select
            clearable
            v-model="dateType"
            style="width: 160px"
            placeholder="请输入适用车间"
          >
            <el-option
              v-for="(item, index) of dateTypeList"
              :key="index"
              :label="item.name"
              :value="item.name"
              >{{ item.name }}</el-option
            >
          </el-select>
        </el-form-item>
        <el-form-item
          label="适用工序"
          prop="applicableProcess"
          class="factory_use_item"
        >
          <el-select
            clearable
            v-model="dateType"
            style="width: 160px"
            placeholder="请输入适用工序"
          >
            <el-option
              v-for="(item, index) of dateTypeList"
              :key="index"
              :label="item.name"
              :value="item.name"
              >{{ item.name }}</el-option
            >
          </el-select>
        </el-form-item>
        <el-form-item label="创建者" prop="createBy" class="factory_use_item">
          <el-input type="text" v-model="form.createBy" placeholder="创建者" />
        </el-form-item>
        <el-form-item
          label="创建时间"
          prop="createTime"
          class="factory_use_item"
        >
          <el-date-picker
            clearable
            v-model="form.createTime"
            type="date"
            value-format="YYYY-MM-DD"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="更新者" prop="updateBy" class="factory_use_item">
          <el-input type="text" v-model="form.updateBy" placeholder="创建者" />
        </el-form-item>
        <el-form-item
          label="更新时间"
          prop="updateTime"
          class="factory_use_item"
        >
          <el-date-picker
            clearable
            v-model="form.updateTime"
            type="date"
            value-format="YYYY-MM-DD"
            placeholder="选择日期"
          >
          </el-date-picker>
        </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,7 +428,13 @@
</template>

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

const { proxy } = getCurrentInstance();

@@ -174,15 +463,95 @@
    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: "周工作",
  },
  {
    name: "节假日",
  },
]);
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"
  }
]);
/** 查询日历管理列表 */
function getList() {
  loading.value = true;
  listCalendar(queryParams.value).then(response => {
  listCalendar(queryParams.value).then((response) => {
    calendarList.value = response.rows;
    total.value = response.total;
    loading.value = false;
@@ -210,7 +579,7 @@
    createBy: null,
    createTime: null,
    updateBy: null,
    updateTime: null
    updateTime: null,
  };
  proxy.resetForm("calendarRef");
}
@@ -229,7 +598,7 @@

// 多选框选中数据
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;
}
@@ -244,8 +613,8 @@
/** 修改按钮操作 */
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;
    open.value = true;
    title.value = "修改日历管理";
@@ -254,16 +623,16 @@

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

function handleSwitchType(e) {
  console.log(e, "日期类型切换");
  typeRadioNumber.value = 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 handleSetWorkDays(e) {
  console.log(weekDaysSettingList.value,"设置周工作日")
}
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: #333;
  margin-left: 20px;
  .week_flex_item {
    &:nth-child(1) {
      margin-top: 5px;
    }
    &:nth-child(2) {
      margin-left: 20px;
    }
  }
}
.factory_use_item {
  margin-top: 10px;
}
</style>

 vite.config.js

@@ -31,7 +31,7 @@
      proxy: {
        // https://cn.vitejs.dev/config/#server-proxy
        '/dev-api': {
          target: 'http://192.168.50.160:8080',
          target: 'http://192.168.50.86:8080',
          changeOrigin: true,
          rewrite: (p) => p.replace(/^\/dev-api/, '')
        }