hospital-project/src/views/evaluate/children/change/components/editMould.vue

<script setup lang="ts">
import { ref, reactive, watch, computed, onMounted } from "vue";
import { ElMessageBox, ElMessage } from "element-plus";
import { useRoute } from "vue-router";
import {
  postAddDimension,
  getDimensionRemove,
  postUpdateDept
} from "@/api/dimension";
import type { DrawerProps, FormItemProps, FormProps } from "element-plus";
// const itemLabelPosition = ref<FormItemProps["labelPosition"]>("");
const drawer = ref(false);
const $route = useRoute();
const $emit = defineEmits(["handClick"]);
const dalongTitle = ref("");
const direction = ref<DrawerProps["direction"]>("rtl");
const ruleFormRef = ref();
const dimWeight = ref(false);
const formLabelAlign = reactive({
  id: "",
  list: [
    {
      id: "",
      dimName: "",
      dimWeight: "",
      mode: ""
    }
  ],
  dimName: "",
  dimWeight: 0,
  mode: 1,
  showIndicRemark: 1,
  showScoreRule: 1,
  showDatasource: 0,
  showTargetValue: 0,
  showFinalValue: 0,
  showChallengeValue: 0,
  showStartValue: 0,
  remark: "",
  tpId: ""
});
const newAddItem = ref();
const handleClose = (done: () => void) => {
  done();
  drawer.value = false;
};
function cancelClick() {
  drawer.value = false;
}
function confirmClick() {
  ruleFormRef.value.validate((valid: boolean) => {
    if (valid) {
      if (dalongTitle.value == "编辑") {
        postUpdateDeptApi();
      } else {
        postAddDimensionApi();
      }
    }
  });
}
const open = (row: any, title: string, order: number) => {
  dalongTitle.value = title;
  if (title == "新建") {
    Object.assign(formLabelAlign, {
      tpId: row.id ? row.id : $route.query.id,
      list: [],
      dimName: "",
      dimWeight: 0,
      mode: 1,
      showIndicRemark: 1,
      showScoreRule: 1,
      showDatasource: 0,
      showTargetValue: 0,
      showFinalValue: 0,
      showChallengeValue: 0,
      showStartValue: 0,
      remark: "",
      order: order
    });
  }
  if (title == "编辑") {
    Object.assign(formLabelAlign, {
      ...row,
      order
    });
  }
  drawer.value = true;
};
// 开关状态
const showIndicRemarkValue = computed({
  get: () => formLabelAlign.showIndicRemark === 1,
  set: value => {
    formLabelAlign.showIndicRemark = value ? 1 : 0;
  }
});
const showScoreRuleValue = computed({
  get: () => formLabelAlign.showScoreRule === 1,
  set: value => {
    formLabelAlign.showScoreRule = value ? 1 : 0;
  }
});

const showDatasourceValue = computed({
  get: () => formLabelAlign.showDatasource === 1,
  set: value => {
    formLabelAlign.showDatasource = value ? 1 : 0;
  }
});

const showTargetValueValue = computed({
  get: () => formLabelAlign.showTargetValue === 1,
  set: value => {
    formLabelAlign.showTargetValue = value ? 1 : 0;
  }
});

const showFinalValueValue = computed({
  get: () => formLabelAlign.showFinalValue === 1,
  set: value => {
    formLabelAlign.showFinalValue = value ? 1 : 0;
  }
});

const showChallengeValueValue = computed({
  get: () => formLabelAlign.showChallengeValue === 1,
  set: value => {
    formLabelAlign.showChallengeValue = value ? 1 : 0;
  }
});

const showStartValueValue = computed({
  get: () => formLabelAlign.showStartValue === 1,
  set: value => {
    formLabelAlign.showStartValue = value ? 1 : 0;
  }
});
// 分割————————————————————————————————————————————
// 新建维度
const postAddDimensionApi = async () => {
  console.log("新建维度", formLabelAlign);
  const { code, msg } = await postAddDimension(formLabelAlign);
  if (code === 200) {
    ElMessage({
      message: "添加成功",
      type: "success"
    });
    $emit("handClick", formLabelAlign.tpId);
    drawer.value = false;
  } else {
    ElMessage({
      message: msg,
      type: "error"
    });
  }
};
// 更新维度
const postUpdateDeptApi = async () => {
  const { code, msg } = await postUpdateDept(formLabelAlign);
  if (code === 200) {
    ElMessage({
      message: "更新成功",
      type: "success"
    });
    $emit("handClick", formLabelAlign.tpId);
    drawer.value = false;
  } else {
    ElMessage({
      message: msg,
      type: "error"
    });
  }
};
defineExpose({
  open
});
</script>

<template>
  <div>
    <el-drawer
      v-model="drawer"
      :direction="direction"
      :before-close="handleClose"
    >
      <template #header>
        <h4>指标详情</h4>
      </template>
      <template #default>
        <div>
          <el-form
            ref="ruleFormRef"
            label-position="top"
            label-width="auto"
            :model="formLabelAlign"
          >
            <el-form-item
              label="维度名称"
              prop="dimName"
              label-position="top"
              :rules="[
                {
                  required: true,
                  message: '请输入模板名称',
                  trigger: 'blur'
                }
              ]"
            >
              <el-input v-model="formLabelAlign.dimName" />
            </el-form-item>
            <el-form-item label="维度权重" label-position="top">
              <el-switch v-model="dimWeight" class="mr-4" />
              <el-input
                v-model="formLabelAlign.dimWeight"
                style="max-width: 150px"
                :disabled="!dimWeight"
              >
                <template #append>%</template>
              </el-input>
            </el-form-item>
            <el-form-item label="计算方式" label-position="top">
              <el-radio-group v-model="formLabelAlign.mode">
                <el-radio :value="0" size="large">加权</el-radio>
                <el-radio :value="1" size="large">加和</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="指标显示字段设置" label-position="top">
              <template #default>
                <div>
                  <div>
                    <el-text type="info">指标说明</el-text>
                    <el-switch v-model="showIndicRemarkValue" class="ml-2" />
                  </div>
                  <div>
                    <el-text type="info">评价标准</el-text>
                    <el-switch v-model="showScoreRuleValue" class="ml-2" />
                  </div>
                  <div>
                    <el-text type="info">数据来源</el-text>
                    <el-switch v-model="showDatasourceValue" class="ml-2" />
                  </div>
                  <div class="ml-3">
                    <el-text type="info">目标值</el-text>
                    <el-switch v-model="showTargetValueValue" class="ml-2" />
                  </div>
                  <div class="ml-3">
                    <el-text type="info">完成值</el-text>
                    <el-switch v-model="showFinalValueValue" class="ml-2" />
                  </div>
                  <div class="ml-3">
                    <el-text type="info">挑战值</el-text>
                    <el-switch v-model="showChallengeValueValue" class="ml-2" />
                  </div>
                  <div class="ml-3">
                    <el-text type="info">门栏值</el-text>
                    <el-switch v-model="showStartValueValue" class="ml-2" />
                  </div>
                </div>
              </template>
            </el-form-item>
          </el-form>
        </div>
      </template>
      <template #footer>
        <div>
          <el-button @click="cancelClick">取消</el-button>
          <el-button type="primary" @click="confirmClick">确认</el-button>
        </div>
      </template>
    </el-drawer>
  </div>
</template>