pms-vue.git - Gitblit

<template>
  <div class="container">
    <div class="title">
      批量日志补录
      <span class="back" @click="back"> <i class="iconfont icon-fanhui"></i> 返回 </span>
    </div>
 
    <div class="log-list">
      <el-divider content-position="left" direction="vertical" class="top-class"></el-divider>
      <el-text type="primary">可以根据下面预设值进行初始化</el-text>
 
      <el-form model="form" ref="form" :inline="true" class="pre-form-class" label-width="auto">
        <el-form-item label="日志日期">
          <el-date-picker
            v-model="daily_date"
            type="date"
            placeholder="日志日期"
            size="default"
            value-format="YYYY-MM-DD"
            style="width: 120px"
            disabled
          />
 
          <!-- <el-date-picker
              v-model="daily_date"
              type="date"
              placeholder="日志日期"
              size="default"
              value-format="YYYY-MM-DD"
              style="width: 120px;"
              @change="preDateChange"
            /> -->
        </el-form-item>
 
        <el-form-item label="日志类型">
          <el-select
            v-model="daily_type"
            placeholder="日志类型"
            style="width: 120px"
            clearable
            filterable
            @change="preDailyTypeChange"
          >
            <el-option v-for="item in dailyTypeArr" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
 
        <el-form-item label="所属项目">
          <el-select
            v-model="project_id"
            placeholder="所属项目"
            style="width: 150px"
            clearable
            filterable
            @change="preProjectInfoChange"
          >
            <el-option v-for="item in projectInfoArr" :key="item.id" :label="item.project_name" :value="item.id" />
          </el-select>
        </el-form-item>
 
        <el-form-item label="状态">
          <el-select
            v-model="daily_status"
            placeholder="状态"
            style="width: 150px"
            clearable
            filterable
            @change="preProjectStatusChange"
          >
            <el-option v-for="item in dailyStatusArr" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
 
        <el-form-item label="初始化条数">
          <el-input
            type="number"
            v-model="itemSize"
            placeholder="初始化条数"
            style="width: 80px"
            @change="preItemSizeChange"
          />
        </el-form-item>
 
        <el-form-item>
          <el-button @click="addRow" class="add-button" type="primary">增加</el-button>
          <el-button @click="submitForm" class="add-button" type="primary">保存</el-button>
        </el-form-item>
      </el-form>
 
      <div v-for="(daily, index) in dailys" :key="index" class="log-item">
        <div class="log-item-content">
          <el-text class="log-index">{{ index + 1 }}</el-text>
          <el-tooltip effect="dark" content="日志日期">
            <el-date-picker
              v-model="daily.daily_date"
              type="date"
              placeholder="日志日期"
              size="default"
              value-format="YYYY-MM-DD"
              style="width: 120px"
              disabled
            />
          </el-tooltip>
          <el-tooltip effect="dark" content="日志类型">
            <el-select v-model="daily.daily_type" placeholder="日志类型" style="width: 100px" clearable filterable>
              <!-- 其他类型选项 -->
              <el-option v-for="item in daily.dailyTypeArr" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-tooltip>
          <el-tooltip effect="dark" content="所属项目">
            <el-select
              v-model="daily.project_id"
              placeholder="所属项目"
              style="width: 140px"
              clearable
              filterable
              @change="updateTasks(index)"
            >
              <el-option
                v-for="item in daily.projectInfoArr"
                :key="item.id"
                :label="item.project_name"
                :value="item.id"
              />
            </el-select>
          </el-tooltip>
          <el-tooltip effect="dark" content="任务">
            <el-select v-model="daily.task_id" placeholder="任务" style="width: 120px" clearable filterable>
              <el-option v-for="item in daily.projectTaskArr" :key="item.id" :label="item.task_name" :value="item.id" />
            </el-select>
          </el-tooltip>
          <el-tooltip effect="dark" content="状态">
            <el-select v-model="daily.daily_status" placeholder="状态" style="width: 100px" clearable filterable>
              <el-option
                v-for="item in daily.dailyStatusArr"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-tooltip>
          <el-tooltip effect="dark" content="日志内容">
            <el-input v-model="daily.daily_content" placeholder="日志内容" style="width: 400px" />
          </el-tooltip>
          <el-tooltip effect="dark" content="计划用时">
            <el-input-number
              v-model="daily.estimated_hours"
              :step="0.5"
              label="计划用时"
              placeholder="计划用时"
              style="width: 100px"
            />
          </el-tooltip>
          <el-tooltip effect="dark" content="实际用时">
            <el-input-number
              v-model="daily.actual_hours"
              :step="0.5"
              :min="0"
              label="实际用时"
              placeholder="实际用时"
              style="width: 100px"
            />
          </el-tooltip>
          <el-tooltip effect="dark" content="备注">
            <el-input v-model="daily.remark" placeholder="备注" style="width: 120px" />
          </el-tooltip>
        </div>
 
        <div class="log-item-action">
          <span @click="deleteRow(index)" class="delete-button">删除</span>
        </div>
      </div>
    </div>
  </div>
</template>
 
<script>
import { reactive, ref, onMounted } from 'vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import projectInfo from '@/model/projectInfo'
import sysDictItemModel from '@/model/sysDictItem'
import projectDaily from '@/model/projectDaily'
import { getDefaultDate, getYesterdayDate, getStartAndEndOfWeek, getPreviousWeekDates } from '@/utils/dateUtils'
 
export default {
  props: {
    editId: {
      type: String,
      default: null,
    },
    editDailyDate: {
      type: String,
      default: null,
    },
  },
  setup(props, context) {
    const loading = ref(false)
 
    const dailyTypeArr = ref([])
    const dailyStatusArr = ref([])
    const projectInfoArr = ref([])
    const projectTaskArr = ref([])
 
    const daily_date = ref(getDefaultDate())
    const daily_type = ref('1')
    const project_id = ref('')
    const daily_status = ref('0')
 
    const itemSize = ref(3)
 
    const dailys = ref([])
 
    const form = ref({})
 
    const listAssign = (a, b) => Object.keys(a).forEach(key => {
      a[key] = b[key] || a[key]
    })
 
    /**
     * 表单规则验证
     */
    const { rules } = getRules()
 
    onMounted(() => {
      // if (props.editId) {
      //   getdaily()
      // }
      if (props.editDailyDate) {
        // 设定当天的日志只能是传过来的值
 
        daily_date.value = props.editDailyDate
      }
 
      loadDictDitems()
 
      loadBatchRows()
    })
 
    // 根据字典类型查询字典
    const loadDictDitems = async () => {
      dailyTypeArr.value = await sysDictItemModel.getSysDictItemListByType('daily_type')
      dailyStatusArr.value = await sysDictItemModel.getSysDictItemListByType('daily_status')
 
      const params = { status: '1,2,3,4' }
      projectInfoArr.value = await projectInfo.getProjectInfoList(params)
      // projectInfoArr.value= await projectInfo.getProjectInfoList("")
    }
 
    // 根据字典类型查询字典
    const loadBatchRows = () => {
      // 循环10次
      for (let i = 0; i < itemSize.value; i++) {
        addRow()
      }
    }
 
    const getdaily = async () => {
      loading.value = true
      const res = await projectDaily.getProjectDaily(props.editId)
      listAssign(daily, res)
      loading.value = false
    }
 
    const preDateChange = () => {
      for (let i = 0; i < dailys.value.length; i++) {
        dailys.value[i].daily_date = daily_date.value
      }
    }
 
    const preDailyTypeChange = () => {
      for (let i = 0; i < dailys.value.length; i++) {
        dailys.value[i].daily_type = daily_type.value
      }
    }
 
    const preProjectInfoChange = () => {
      for (let i = 0; i < dailys.value.length; i++) {
        dailys.value[i].project_id = project_id.value
      }
    }
 
    const preProjectStatusChange = () => {
      for (let i = 0; i < dailys.value.length; i++) {
        dailys.value[i].daily_status = daily_status.value
      }
    }
 
    const preItemSizeChange = () => {
      dailys.value = []
      loadBatchRows()
    }
 
    // 重置表单
    const resetForm = () => {
      dailys.value = []
      loadBatchRows()
    }
 
    const submitForm = async formName => {
      for (let i = 0; i < dailys.value.length; i++) {
        const index = i + 1
        const tmpDaily = dailys.value[i]
        const yesterday = getYesterdayDate()
        const today = getDefaultDate()
 
        if (!tmpDaily.daily_date) {
          ElMessage.error(`条目（${index}）的日志日期不能为空！`)
          return
        }
        if (!tmpDaily.project_id) {
          ElMessage.error(`条目（${index}）的所属项目不能为空！`)
          return
        }
        if (!tmpDaily.daily_type) {
          ElMessage.error(`条目（${index}）的日志类型不能为空！`)
          return
        }
        if (!tmpDaily.daily_status) {
          ElMessage.error(`条目（${index}）的状态不能为空！`)
          return
        }
 
        if (!tmpDaily.daily_content) {
          ElMessage.error(`条目（${index}）的日志内容不能为空！`)
          return
        }
        if (!tmpDaily.estimated_hours) {
          ElMessage.error(`条目（${index}）的计划用时不能为空！`)
          return
        }
        if (!tmpDaily.actual_hours) {
          ElMessage.error(`条目（${index}）的实际用时不能为空！`)
          return
        }
      }
 
      // 删除操作
      // ElMessageBox.confirm('请检查完成状态与实际用时，如无问题则将确认补录,补录的数据无需再次提交, 是否继续?', '提示', {
      ElMessageBox.confirm('请检查完成状态与实际用时，如无问题则将确认补录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(async () => {
          loading.value = true
          const newData = camel(dailys.value)
 
          const tempForm = { daily_list: JSON.stringify(newData) }
 
          const res = await projectDaily.supplementaryProjectDailyBatch(tempForm)
 
          if (res.code < window.MAX_SUCCESS_CODE) {
            // 重新初始化
            resetForm()
            ElMessage.success(`${res.message}`)
            loading.value = false
          } else {
            ElMessage.success(`${res.message}`)
            loading.value = false
          }
        })
        .catch(() => {
          // 用户点击取消按钮时执行的操作
          // 可以选择不做任何事情，也可以显示取消消息
          // ElMessage.info('操作已取消'); // 如果需要显示取消消息，可以取消注释
        })
    }
 
    const addRow = () => {
      dailys.value.push({
        id: '',
        project_id: project_id.value,
        task_id: '',
        task_desc: '',
        daily_date: daily_date.value,
        daily_type: daily_type.value,
        daily_content: '',
        daily_status: daily_status.value,
        estimated_hours: 2,
        actual_hours: 0,
        remark: '',
        dailyTypeArr,
        dailyStatusArr,
        projectInfoArr,
        projectTaskArr,
      })
    }
 
    const deleteRow = index => {
      dailys.value.splice(index, 1)
    }
 
    const updateTasks = index => {
      dailys.value[index].projectTaskArr = [
        { task_name: '子选项1', id: 'suboption1' },
        { task_name: '子选项2', id: 'suboption2' },
      ]
    }
 
    const back = () => {
      context.emit('editClose')
    }
 
    return {
      back,
      rules,
      resetForm,
      submitForm,
 
      dailys,
      addRow,
      deleteRow,
 
      dailyTypeArr,
      dailyStatusArr,
      projectInfoArr,
      updateTasks,
 
      form,
      daily_date,
      daily_type,
      project_id,
      daily_status,
      itemSize,
 
      preDateChange,
      preDailyTypeChange,
      preProjectInfoChange,
      preItemSizeChange,
      preProjectStatusChange,
    }
  },
}
 
/**
 * 表单验证规则
 */
function getRules() {
  /**
   * 验证回调函数
   */
  const checkInfo = (rule, value, callback) => {
    if (!value) {
      callback(new Error('信息不能为空'))
    }
    callback()
  }
  const rules = {
    daily_date: [{ validator: checkInfo, trigger: 'blur', required: true }],
    daily_type: [{ validator: checkInfo, trigger: 'blur', required: true }],
    daily_content: [{ validator: checkInfo, trigger: 'blur', required: true }],
    estimated_hours: [{ validator: checkInfo, trigger: 'blur', required: true }],
  }
  return { rules }
}
 
/**
 * 下划线转驼峰
 */
function camel(data) {
  if (typeof data !== 'object' || !data) return data
  if (Array.isArray(data)) {
    return data.map(item => camel(item))
  }
 
  const newData = {}
  for (const key in data) {
    const newKey = key.replace(/_([a-z])/g, (p, m) => m.toUpperCase())
    newData[newKey] = camel(data[key])
  }
  return newData
}
 
/**
 * 驼峰转下划线
 */
function underline(data) {
  if (typeof data !== 'object' || !data) return data
  if (Array.isArray(data)) {
    return data.map(item => underline(item))
  }
 
  const newData = {}
  for (const key in data) {
    const newKey = key.replace(/([A-Z])/g, (p, m) => `_${m.toLowerCase()}`)
    newData[newKey] = underline(data[key])
  }
  return newData
}
</script>
 
<style lang="scss" scoped>
.container {
  .title {
    height: 59px;
    line-height: 59px;
    color: $parent-title-color;
    font-size: 16px;
    font-weight: 500;
    text-indent: 40px;
    border-bottom: 1px solid #dae1ec;
 
    .back {
      float: right;
      margin-right: 40px;
      cursor: pointer;
    }
  }
 
  .wrap {
    padding: 20px;
  }
 
  .submit {
    float: left;
  }
}
</style>
 
<style scoped>
.top-class {
  margin: 10 5 5 5;
}
.pre-form-class {
  margin: 5px;
}
.log-list {
  margin-top: 10px;
  max-height: 90%; /* 设置最大高度，出现滚动条 */
  overflow-y: auto; /* 垂直滚动条 */
  width: 99%;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: #ccc #f2f2f2;
}
 
.log-index {
  padding-left: 5px;
  padding-right: 5px;
  width: 20px;
}
.log-item {
  display: flex;
  align-items: center;
  justify-content: left;
  margin-bottom: 2px;
  /* padding: 10px; */
  /* background-color: #f2f2f2; */
}
 
.log-item-content {
  /* flex: 1; */
  /* display: flex; */
  /* align-items: center; */
  width: auto;
  display: flex;
}
 
.log-item-action {
  flex-shrink: 0;
  margin-left: 5px;
}
 
.delete-button {
  cursor: pointer;
  font-size: 14px;
}
 
.add-button {
  margin: 5px;
}
</style>