权重配置更新

GuLiMmo

2024-02-26 c417319fe54054252ee1d45a5379f3e712d32c8d

权重配置更新

 src/option/assessment/assessmentConfig.js

@@ -2,11 +2,13 @@
  height: 'auto',
  calcHeight: 30,
  tip: false,
  searchShow: true,
  searchShow: false,
  searchMenuSpan: 6,
  searchLabelWidth: 100,
  border: true,
  index: true,
  viewBtn: true,
  editBtn: false,
  viewBtn: false,
  selection: true,
  dialogClickModal: false,
  labelWidth: 130,
@@ -65,6 +67,7 @@
      label: "考核人",
      prop: "assessorUserName",
      type: "cascader",
      search: true,
      expandTrigger: 'click',
      dicData: [],
      props: {

 src/views/assessment/assessmentConfig.vue

@@ -1,5 +1,24 @@
<template>
  <basic-container>
    <div class="search">
      <div class="input-box">
        <div class="label">被考核人:</div>
        <el-input v-model="query.userName" placeholder="请输入被考核人" class="e-input" clearable />
      </div>
      <div class="input-box">
        <div class="label">考核人:</div>
        <el-input
          v-model="query.assessorUserName"
          placeholder="请输入考核人"
          class="e-input"
          clearable
        />
      </div>
      <div>
        <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
        <el-button plain icon="el-icon-delete" @click="handleReset">清空</el-button>
      </div>
    </div>
    <avue-crud
      :option="option"
      v-model:search="search"
@@ -34,6 +53,10 @@
          权重导入
        </el-button>
      </template>
      <template #menu="{ row, index, size }">
        <el-button text type="primary" icon="el-icon-view" plain @click="handleEdit(row, 'view')">查看</el-button>
        <el-button text type="primary" icon="el-icon-edit" plain @click="handleEdit(row, 'edit')">编辑</el-button>
      </template>
    </avue-crud>
    <el-dialog title="权重数据导入" append-to-body v-model="excelBox" width="555px">
      <avue-form :option="excelOption" v-model="excelForm" :upload-after="uploadAfter">
@@ -44,12 +67,14 @@
        </template>
      </avue-form>
    </el-dialog>
    <configEdit :params="configDialogParmas" @refresh="onLoad" />
  </basic-container>
</template>

<script>
import axios from 'axios';
import _ from 'lodash'
import configEdit from './components/configEdit.vue';
import _ from 'lodash';
import { getList, getDetail, add, update, remove } from '@/api/assessment/assessmentConfig';
import option from '@/option/assessment/assessmentConfig';
import { mapGetters } from 'vuex';
@@ -60,11 +85,13 @@
import NProgress from 'nprogress';
import 'nprogress/nprogress.css';
import website from '@/config/website';
import { getDeptTree, getDeptLazyTree } from '@/api/system/dept';
import { getDeptTree } from '@/api/system/dept';
import { getList as getUserList } from '@/api/system/user.js';
import { copy } from '@/api/tool/code';

export default {
  components: {
    configEdit,
  },
  data() {
    return {
      form: {},
@@ -133,6 +160,7 @@
        ],
      },
      userList: [],
      configDialogParmas: {},
    };
  },
  watch: {
@@ -181,10 +209,10 @@
  },
  methods: {
    rowSave(row, done, loading) {
      const { userName,  assessorUserName} = row
      const { userName, assessorUserName } = row;
      const usernameData = this.userList.find(ele => ele.id === userName);
      const assessorUserNameData = this.userList.find(ele => ele.id === assessorUserName);
      const copyRow = _.cloneDeep(row)
      const copyRow = _.cloneDeep(row);
      copyRow.userId = usernameData.id;
      copyRow.userName = usernameData.name;
      copyRow.deptId = usernameData.deptId;
@@ -207,10 +235,10 @@
      );
    },
    rowUpdate(row, index, done, loading) {
      const { userName,  assessorUserName} = row
      const { userName, assessorUserName } = row;
      const usernameData = this.userList.find(ele => ele.id === userName);
      const assessorUserNameData = this.userList.find(ele => ele.id === assessorUserName);
      const copyRow = _.cloneDeep(row)
      const copyRow = _.cloneDeep(row);
      copyRow.userId = usernameData.id;
      copyRow.userName = usernameData.name;
      copyRow.deptId = usernameData.deptId;
@@ -307,6 +335,15 @@
      this.onLoad(this.page, params);
      done();
    },
    handleSearch() {
      this.page.currentPage = 1;
      this.onLoad(this.page);
    },
    handleReset() {
      this.query = {};
      this.page.currentPage = 1;
      this.onLoad(this.page);
    },
    selectionChange(list) {
      this.selectionList = list;
    },
@@ -328,7 +365,9 @@

      const {} = this.query;

      let values = {};
      let values = {
        ...this.query,
      };

      getList(page.currentPage, page.pageSize, values).then(res => {
        const data = res.data.data;
@@ -421,6 +460,13 @@
        }
      };
    },
    handleEdit(row, type) {
      this.configDialogParmas = {
        dialogVisible: true,
        isEdit: type === 'edit',
        ...row
      }
    }
  },
  mounted() {
    this.initData();
@@ -428,4 +474,24 @@
};
</script>

<style></style>
<style lang="scss" scoped>
.search {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 20px;
  .input-box {
    width: 300px;
    display: flex;
    align-items: center;
    .label {
      width: 80px;
      font-size: 14px;
      color: #606266;
    }
    .e-input {
      width: 250px;
    }
  }
}
</style>

 src/views/assessment/components/configEdit.vue

New file
@@ -0,0 +1,326 @@
<template>
  <el-dialog v-model="params.dialogVisible" :title="params.isEdit ? '编辑' : '预览'" width="60%">
    <el-form
      :model="form"
      :rules="rules"
      label-width="120px"
      v-loading="isLoading"
      element-loading-text="数据加载中"
      ref="formRef"
      :disabled="!params.isEdit"
    >
      <div class="form-content">
        <div class="form-item">
          <el-form-item label="被考核人部门:" prop="cDeptId">
            <el-cascader
              v-model="form.cDeptId"
              :props="{
                value: 'value',
                label: 'title',
                lazy: false,
              }"
              :options="cascaderOptions"
              :show-all-levels="false"
              @change="handleDeptChange"
              style="width: 100%"
              placeholder="请选择被考核人部门"
            />
          </el-form-item>
        </div>
        <div class="form-item">
          <el-form-item label="被考核人" prop="userId">
            <!-- <el-input v-model="form.userName" placeholder="请输入被考核人" /> -->
            <el-select
              v-model="form.userId"
              placeholder="请选择被考核人"
              @change="handleUserNameChange"
              style="width: 100%"
            >
              <el-option
                v-for="item in userList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="form-item">
          <el-form-item label="被考核人职位:" prop="postName">
            <el-input v-model="form.postName" disabled placeholder="请输入被考核人职位" />
          </el-form-item>
        </div>
        <div class="form-item">
          <el-form-item label="考核人部门:" prop="cAssessorDeptId">
            <el-cascader
              v-model="form.cAssessorDeptId"
              :props="{
                value: 'value',
                label: 'title',
                lazy: false,
              }"
              :options="cascaderOptions"
              :show-all-levels="false"
              @change="handleAssessorDeptChange"
              style="width: 100%"
              placeholder="请选择考核人部门"
            />
          </el-form-item>
        </div>
        <div class="form-item">
          <el-form-item label="考核人:" prop="assessorUserId">
            <!-- <el-input v-model="form.assessorUserName" placeholder="请输入被考核人部门" /> -->
            <el-select
              v-model="form.assessorUserId"
              placeholder="请选择被考核人"
              style="width: 100%"
              @change="handleAssessorUserChange"
            >
              <el-option
                v-for="item in assessorUserList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="form-item">
          <el-form-item label="考核人职位:" prop="assessorPostName">
            <el-input v-model="form.assessorPostName" disabled placeholder="请输入考核人职位" />
          </el-form-item>
        </div>
        <div class="form-item">
          <el-form-item label="权值:" prop="weight">
            <el-input v-model="form.weight" placeholder="请输入权值" />
          </el-form-item>
        </div>
        <div class="form-item">
          <el-form-item label="范围:" prop="rangeVal">
            <el-input v-model="form.rangeVal" placeholder="请输入范围" />
          </el-form-item>
        </div>
      </div>
    </el-form>
    <template #footer v-if="params.isEdit">
      <el-button type="primary" icon="el-icon-edit" :disabled="isLoading" @click="infoUpdate"
        >修改</el-button
      >
      <el-button icon="el-icon-close" @click="params.dialogVisible = false">取消</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { reactive, ref, watch } from 'vue';
import website from '@/config/website';
import { getDeptTree } from '@/api/system/dept';
import { getList as getUserList } from '@/api/system/user.js';
import { ElMessage } from 'element-plus';
import { update } from '@/api/assessment/assessmentConfig';

const props = defineProps({
  params: {
    type: Object,
    default: () => {},
  },
});

const emits = defineEmits(['refresh']);

const isLoading = ref(false);

const valueArr = ['id'];

const form = reactive({
  id: '',
  userId: '',
  userName: '',
  postId: '',
  postName: '',
  deptId: '',
  deptName: '',
  assessorUserId: '',
  assessorUserName: '',
  assessorDeptId: '',
  assessorDeptName: '',
  assessorPostId: '',
  assessorPostName: '',
  weight: '',
  rangeVal: '',
  cDeptId: '',
  cAssessorDeptId: '',
});
const formRef = ref(null);

const rules = {
  userId: [
    {
      required: true,
      message: '请选择被考核人',
      trigger: 'change',
    },
  ],
  assessorUserId: [
    {
      required: true,
      message: '请选择考核人',
      trigger: 'change',
    },
  ],
  weight: [
    {
      required: true,
      message: '请输入权值',
      trigger: 'change',
    },
  ],
  rangeVal: [
    {
      required: true,
      message: '请输入范围',
      trigger: 'change',
    },
  ],
  cDeptId: [
    {
      required: true,
      message: '请选择被考核人部门',
      trigger: 'change',
    },
  ],
  cAssessorDeptId: [
    {
      required: true,
      message: '请选择考核人部门',
      trigger: 'change',
    },
  ],
  postName: [
    {
      required: true,
      message: '请填写被考核人部门',
      trigger: 'change',
    },
  ],
  assessorPostName: [
    {
      required: true,
      message: '请填写考核人部门',
      trigger: 'change',
    },
  ],
};

const userList = ref([]);
const handleDeptChange = deptId => {
  const cdeptId = deptId[deptId.length - 1];
  getUsers(deptId, 1);
  form.deptId = cdeptId;
};
const handleUserNameChange = userId => {
  const user = userList.value.find(userItem => userItem.id === userId);
  form.userName = user.name;
  form.postId = user.postId;
  form.deptName = user.deptName;
  form.postName = user.postName;
};

const assessorUserList = ref([]);
const handleAssessorDeptChange = deptId => {
  const cdeptId = deptId[deptId.length - 1];
  getUsers(cdeptId, 2);
  form.assessorDeptId = cdeptId;
};
const handleAssessorUserChange = userId => {
  const user = assessorUserList.value.find(userItem => userItem.id === userId);
  form.assessorUserName = user.name;
  form.assessorPostId = user.postId;
  form.assessorDeptName = user.deptName;
  form.assessorPostName = user.postName;
};

const getUsers = (deptId, type) => {
  isLoading.value = true;
  getUserList(
    1,
    1000,
    {
      userType: 2,
    },
    deptId
  ).then(usersRes => {
    if (usersRes.data.code !== 200) return ElMessage.error('获取用户信息失败！！！');
    if (type === 1) {
      userList.value = usersRes.data.data.records;
    } else {
      assessorUserList.value = usersRes.data.data.records;
    }
    isLoading.value = false;
  });
};

const infoUpdate = () => {
  formRef.value.validate(valid => {
    if (!valid) return;
    update(form).then(res => {
      if (res.data.code !== 200) return ElMessage.error(res.data.msg);
      props.params.dialogVisible = false;
      const page = {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      };
      emits('refresh', page);
    });
  });
};

const cascaderOptions = ref([]);
const getDeptList = defaultParams => {
  isLoading.value = true;
  getDeptTree(website.tenantId).then(deptRes => {
    const deptData = deptRes.data;
    if (deptData.code !== 200) return ElMessage.error('获取部门信息失败！！！');
    cascaderOptions.value = deptData.data;

    Object.keys(form).forEach(key => {
      form[key] = defaultParams[key];
      if (key === 'cDeptId') {
        form[key] = [cascaderOptions.value[0].value, form['deptId']];
        handleDeptChange(form[key]);
      }
      if (key === 'cAssessorDeptId') {
        form[key] = [cascaderOptions.value[0].value, form['assessorDeptId']];
        handleAssessorDeptChange(form[key]);
      }
    });

    isLoading.value = false;
  });
};

watch(
  () => props.params,
  val => {
    if (val.dialogVisible === false) return;
    getDeptList(val);
  },
  {
    deep: true,
    immediate: true,
  }
);
</script>

<style lang="scss" scoped>
.form-content {
  width: 100%;
  display: flex;
  flex-wrap: wrap;

  .form-item {
    width: 50%;
  }
}
</style>