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

<script setup lang="ts">
import { ref, reactive } from "vue";
import { ElMessageBox } from "element-plus";
import type { DrawerProps, FormItemProps, FormProps } from "element-plus";
// const itemLabelPosition = ref<FormItemProps["labelPosition"]>("");
const drawer = ref(false);
const direction = ref<DrawerProps["direction"]>("rtl");
const formLabelAlign = reactive({
  name: "",
  region: "",
  type: ""
});
const handleClose = (done: () => void) => {
  ElMessageBox.confirm("配置项未保存，确认关闭", {
    type: "warning"
  }).then(() => {
    drawer.value = false;
  });
};
function cancelClick() {
  drawer.value = false;
}
function confirmClick() {
  console.log(1111);
}
const open = row => {
  drawer.value = true;
};
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
            label-position="top"
            label-width="auto"
            :model="formLabelAlign"
          >
            <el-form-item label="维度名称" label-position="top">
              <el-input />
            </el-form-item>
            <el-form-item label="维度权重" label-position="top">
              <el-switch 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="radio1">
                <el-radio value="1" size="large">加权</el-radio>
                <el-radio value="2" size="large">加和</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="指标显示字段设置" label-position="top">
              <div>
                <el-text type="info">指标说明</el-text>
                <el-switch class="ml-2" />
              </div>
              <br />
              <div>
                <el-text type="info">评价标准</el-text>
                <el-switch class="ml-2" />
              </div>
              <br />
              <div>
                <el-text type="info">数据来源</el-text>
                <el-switch class="ml-2" />
              </div>
              <div>
                <el-text type="info">目标值</el-text>
                <el-switch class="ml-2" />
              </div>
              <div>
                <el-text type="info">完成值</el-text>
                <el-switch class="ml-2" />
              </div>
              <div>
                <el-text type="info">挑战值</el-text>
                <el-switch class="ml-2" />
              </div>
              <div>
                <el-text type="info">门栏值</el-text>
                <el-switch class="ml-2" />
              </div>
            </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>