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

<script setup lang="ts">
import { ref, reactive, watch } from "vue";
import { ElMessageBox, ElMessage } from "element-plus";
import { postAddDimension, getDimensionRemove } from "@/api/dimension";
import type { DrawerProps, FormItemProps, FormProps } from "element-plus";
// const itemLabelPosition = ref<FormItemProps["labelPosition"]>("");
const drawer = ref(false);
const direction = ref<DrawerProps["direction"]>("rtl");
const ruleFormRef = ref();
const formLabelAlign = reactive({
  list: [
    {
      id: "",
      dimName: "",
      dimWeight: "",
      mode: ""
    }
  ],
  dimName: "",
  dimWeight: "",
  mode: 1,
  showIndicRemark: 1,
  showScoreRule: 1,
  showDatasource: 0,
  showTargetValue: 0,
  showFinalValue: 0,
  showChallengeValue: 0,
  showStartValue: 0,
  remark: ""
});
watch(
  () => [
    formLabelAlign.showIndicRemark,
    formLabelAlign.showScoreRule,
    formLabelAlign.showDatasource,
    formLabelAlign.showTargetValue,
    formLabelAlign.showFinalValue,
    formLabelAlign.showChallengeValue,
    formLabelAlign.showStartValue
  ],
  newValues => {
    formLabelAlign.showIndicRemark = newValues[0] ? 1 : 0;
    formLabelAlign.showScoreRule = newValues[1] ? 1 : 0;
    formLabelAlign.showDatasource = newValues[2] ? 1 : 0;
    formLabelAlign.showTargetValue = newValues[3] ? 1 : 0;
    formLabelAlign.showFinalValue = newValues[4] ? 1 : 0;
    formLabelAlign.showChallengeValue = newValues[5] ? 1 : 0;
    formLabelAlign.showStartValue = newValues[6] ? 1 : 0;
  }
);
const newAddItem = ref();
const handleClose = (done: () => void) => {
  // ElMessageBox.confirm("配置项未保存，确认关闭", {
  //   type: "warning"
  // }).then(() => {
  // });
  drawer.value = false;
};
function cancelClick() {}
function confirmClick() {
  ruleFormRef.value.validate((valid: boolean) => {
    if (valid) {
      postAddDimensionApi();
    }
  });
}
const open = row => {
  if (row) {
    formLabelAlign.dimName = row.name;
  } else {
    formLabelAlign.dimName = "";
  }
  drawer.value = true;
};
const postAddDimensionApi = async () => {
  const { code, msg } = await postAddDimension(formLabelAlign);
  if (code === 200) {
    ElMessage({
      message: "添加成功",
      type: "success"
    });
    drawer.value = false;
  } else {
    ElMessage({
      message: msg,
      type: "error"
    });
  }
};
defineExpose({
  open
});
const radio1 = ref("1");
</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="formLabelAlign.dimWeight" class="mr-4" />
              <el-input style="max-width: 150px">
                <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="{ row }"> -->
              <template #default>
                <div>
                  <div>
                    <el-text type="info">指标说明</el-text>
                    <el-switch
                      v-model="formLabelAlign.showIndicRemark"
                      class="ml-2"
                    />
                  </div>
                  <div>
                    <el-text type="info">评价标准</el-text>
                    <el-switch
                      v-model="formLabelAlign.showScoreRule"
                      class="ml-2"
                    />
                  </div>
                  <div>
                    <el-text type="info">数据来源</el-text>
                    <el-switch
                      v-model="formLabelAlign.showDatasource"
                      class="ml-2"
                    />
                  </div>
                  <div class="ml-3">
                    <el-text type="info">目标值</el-text>
                    <el-switch
                      v-model="formLabelAlign.showTargetValue"
                      class="ml-2"
                    />
                  </div>
                  <div class="ml-3">
                    <el-text type="info">完成值</el-text>
                    <el-switch
                      v-model="formLabelAlign.showFinalValue"
                      class="ml-2"
                    />
                  </div>
                  <div class="ml-3">
                    <el-text type="info">挑战值</el-text>
                    <el-switch
                      v-model="formLabelAlign.showChallengeValue"
                      class="ml-2"
                    />
                  </div>
                  <div class="ml-3">
                    <el-text type="info">门栏值</el-text>
                    <el-switch
                      v-model="formLabelAlign.showStartValue"
                      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>