sgxt_web/src/views/backOfficeSystem/goingJob/addForm.vue

<template>
  <div class="dialog" v-if="dialogForm">
    <div class="head_box">
      <span class="title">{{ title }}完成情况</span>
      <div>
        <el-button type="primary" size="small" v-if="!disabled" :loading="loading" @click="submit">保存</el-button>
        <el-button size="small" @click="close">关闭</el-button>
      </div>
    </div>
    <div class="form_cnt">
      <FormMessage ref="elform" :disabled="disabled" v-model="listQuery" :formList="formData" :rules="rules">
      </FormMessage>
      <div>
        <div class="btn_box">
          <el-button :disabled="disabled" type="primary" size="small" @click="openZdsjLod">打开今日完成情况列表</el-button>
        </div>
        <MyTable :tableData="pageData.tableData" :tableColumn="pageData.tableColumn" :tableHeight="300"
          :key="pageData.keyCount" :tableConfiger="pageData.tableConfiger">
          <template #controls="{ row }">
            <el-link type="primary" :disabled="disabled" size="small" @click="openZdsjLod('edit', row)">编辑</el-link>
            <el-link type="danger" :disabled="disabled" size="small" @click="deleteZdsjLodList(row.id)">删除</el-link>
          </template>
        </MyTable>
      </div>
      <div>
        <div class="btn_box">
          <el-button :disabled="disabled" type="primary" size="small" @click="openToDayContent">明日值班工作列表</el-button>
        </div>
        <MyTable :tableData="toDayJobList.tableData" :tableColumn="toDayJobList.tableColumn" :tableHeight="300"
          :key="toDayJobList.keyCount" :tableConfiger="toDayJobList.tableConfiger">
          <template #controls="{ row }">
            <el-link type="primary" :disabled="disabled" size="small"
              @click="openToDayContent('edit', row)">编辑</el-link>
            <el-link type="danger" :disabled="disabled" size="small" @click="deleteToDayContent(row.id)">删除</el-link>
          </template>
        </MyTable>
      </div>
    </div>
  </div>
  <ZdsjLod v-model="zdsjLodShow" @addZdsjLodList="addZdsjLodList" :zdsjLod="zdsjLod" />
  <ToDayContent v-model="toDayContentShow" @addZdsjLodList="addToDayLodList" :toDayContent="toDayContent" />
</template>

<script setup>
import FormMessage from "@/components/aboutTable/FormMessage.vue";
import { qcckGet, qcckPost, qcckPut } from "@/api/qcckApi.js";
import { ref, defineExpose, reactive, onMounted, defineEmits, getCurrentInstance, watch, onUnmounted } from "vue";
import MyTable from "@/components/aboutTable/MyTable.vue";
import ZdsjLod from "./zdsjLod.vue";
import ToDayContent from "./toDayContent.vue";
const emit = defineEmits(["getList"]);
const { proxy } = getCurrentInstance();
const dialogForm = ref(false); //弹窗
const rules = reactive({
  jrzbrXm: [{ required: true, message: "请输入今日值班人", trigger: "blur" }],
  jrzbrLxdh: [{ required: true, message: "请输入今日值班电话", trigger: "blur" }],
  mrzbrXm: [{ required: true, message: "请输入明日值班人", trigger: "blur" }],
  mrzbrLxdh: [{ required: true, message: "请输入明日值班电话", trigger: "blur" }],
  kssj: [{ required: true, message: "请选择开始时间", trigger: "blur" }],
  jssj: [{ required: true, message: "请选择结束时间", trigger: "blur" }],
  gzrq: [{ required: true, message: "请选择工作日期", trigger: "blur" }],
});
const listQuery = ref({}); //表单
const formData = ref([
  { label: "今日值班人", prop: "jrzbrXm", type: "input" },
  { label: "今日值班电话", prop: "jrzbrLxdh", type: "input" },
  { label: "明日值班人", prop: "mrzbrXm", type: "input" },
  { label: "明日值班电话", prop: "mrzbrLxdh", type: "input" },
  { label: "开始时间", prop: "kssj", type: "datetime" },
  { label: "结束时间", prop: "jssj", type: "datetime" },
  { label: "工作日期", prop: "gzrq", type: "date" },
  { label: "备注", prop: "bz", type: "textarea", width: "100%" },

]);
const pageData = reactive({
  tableData: [], //表格数据
  tableConfiger: {
    rowHieght: 61,
    showSelectType: "null", //选择类型
  },
  tableColumn: [
    { label: "工作任务", prop: "grw", showOverflowTooltip: true },
    { label: "完成情况", prop: "wcqk", showOverflowTooltip: true },
    { label: "	来源", prop: "ly", showOverflowTooltip: true },
    // { label: "序号", prop: "index", showOverflowTooltip: true },
  ]
});
const toDayJobList = reactive({
  tableData: [], //表格数据
  tableConfiger: {
    rowHieght: 61,
    showSelectType: "null", //选择类型
  },
  tableColumn: [
    { label: "工作内容", prop: "gznr", showOverflowTooltip: true },
  ]
});
const loading = ref(false);
const elform = ref();
const title = ref("");
const disabled = ref(false);

// 初始化数据
const init = (type, row) => {
  title.value = type == 'edit' ? '编辑' : type == 'add' ? '新增' : '详情'
  dialogForm.value = true;
  if (type != 'add') {
    qcckGet({}, '/mosty-gsxt/gzqk/' + row.id).then(res => {
      listQuery.value = res;
      pageData.tableData = res.wcqkList || [];
      toDayJobList.tableData = res.zbgzList || [];
    });
    if (type == 'detail') {
      disabled.value = true;
    } else {
      disabled.value = false;
    }
  }
};
// 提交
const submit = () => {
  const promes = {
    ...listQuery.value,
    wcqkList: pageData.tableData,
    zbgzList: toDayJobList.tableData,
  }
  elform.value.submit((data) => {
    loading.value = true;
    if (title.value == "新增") {
      qcckPost(promes, '/mosty-gsxt/gzqk/addEntity').then(() => {
        proxy.$message({ type: "success", message: title.value + "成功" });
        emit("getList");
        close();
      }).catch(() => {
      }).finally(() => {
        loading.value = false;
      });
    } else {
      qcckPut(promes, '/mosty-gsxt/gzqk/editEntity').then(() => {
        proxy.$message({ type: "success", message: title.value + "成功" });
        emit("getList");
        close();
      }).catch(() => {
      }).finally(() => {
        loading.value = false;
      });
    }

  });
};
//打开今日完成情况列表
const zdsjLodShow = ref();
const zdsjLod = ref();
const openZdsjLod = (type, row) => {
  if (type == 'edit') {
    console.log(row);
    zdsjLod.value = { ...row };
  }
  zdsjLodShow.value = true;
}
const addZdsjLodList = (val) => {
  const index = pageData.tableData.findIndex(v => v.id == val.id);
  if (index != -1) {
    pageData.tableData[index] = val;
  } else {
    pageData.tableData.push(val);
  }
}
const deleteZdsjLodList = (id) => {
  const index = pageData.tableData.findIndex(v => v.id == id);
  if (index != -1) {
    pageData.tableData.splice(index, 1);
  }
}
// 打开明日值日列表
const toDayContentShow = ref();
const toDayContent = ref();
const openToDayContent = (type, row) => {
  if (type == 'edit') {
    toDayContent.value = { ...row };
  }
  toDayContentShow.value = true;
}
const addToDayLodList = (val) => {
  const index = toDayJobList.tableData.findIndex(v => v.id == val.id);
  if (index != -1) {
    toDayJobList.tableData[index] = val;
  } else {
    toDayJobList.tableData.push(val);
  }
}
const deleteToDayContent = (id) => {
  const index = toDayJobList.tableData.findIndex(v => v.id == id);
  if (index != -1) {
    toDayJobList.tableData.splice(index, 1);
  }
}
// 关闭
const close = () => {
  listQuery.value = {};
  dialogForm.value = false;
  loading.value = false;
};

onMounted(() => {
});

defineExpose({ init });
</script>

<style lang="scss" scoped>
@import "~@/assets/css/layout.scss";
@import "~@/assets/css/element-plus.scss";

::v-deep .el-tabs--card>.el-tabs__header .el-tabs__item.is-active {
  color: #0072ff;
  background: rgba(0, 114, 255, 0.3);
}

.boxlist {
  width: calc(99% - 50px);
  margin-top: 10px;
  overflow: hidden;
}

.depBox {
  border: 1px solid #e9e9e9;
  padding: 0 0 0 4px;
  border-radius: 4px;
  width: 100%;

  .coolor {
    color: #d3d3d3;
  }

}

.zdy-taf {
  width: 100%;
  width: 100%;
  min-height: 32px;
  border: 1px solid #e9e9e9;
  border-radius: 4px;
  padding: 0px 5px;
  box-sizing: border-box;
}

.map {
  height: 520px;
  margin-top: 10px;
}

.btn_box {
  margin: 10px 0;
}
</style>