UI3/src/views/overAnalysis/overParam.vue

<script setup lang="ts">
import { ref, computed } from "vue"
import type { Header } from "@/components/Table/table-partials/models"
import { maper } from "@/core/utils/utils"
import Rs from "@/core/services/RequestService"
import type { VbFormItem } from "@/components/Forms/models"
import OrgSelectTree from "@/components/Tree/OrgSelectTree.vue"
import AreaCascadeSelect from "@/components/select/AreaCascadeSelect.vue"
import { ElInput } from "element-plus"
import { RULE_KEYS } from "@/core/config/rules"
import { ElSelect, ElRadioGroup, ElCheckboxGroup } from "element-plus"
const table = ref<any>()
const cols = ref<Array<Header>>([
  { name: "名称", field: "name", align: "left", width: "200px" },
  { name: "简称", field: "simple_name" },
  //{ name: "父级", field: "parent_id" },
  { name: "code", field: "code" },
  { name: "省/市/区", field: "province_city_district" },
  { name: "描述", field: "description" },
  {
    name: "操作",
    field: "action",
    width: "150px",
  },
])
const modal = ref<any>()
//定义需要操作的类型
const opreationType = ref<"A" | "U" | "D">("A")
const modalTitlePrefix = computed(() => {
  return opreationType.value == "A" ? "新增" : opreationType.value == "U" ? "编辑" : ""
})
//后期api完善了这里可以改成 返回Promise的function
const saveUrl = computed(() => {
  return opreationType.value == "A"
    ? "sys/organizational/insert"
    : opreationType.value == "U"
    ? "sys/organizational/update"
    : opreationType.value == "D"
    ? "sys/organizational/delById"
    : ""
})
const areaData = ref([])
function load() {
  Rs.get("sys/dict/getArea").then((res) => {
    areaData.value = res.data
  })
}
load()
//只放增改传到后台的共用参数,其余需要modal显示的参数另外定义
const emptyData = {
  org_id: "",
  parent_id: "0",
  name: "",
  simple_name: "",
  code: "",
  description: "",
  province: "",
  city: "",
  district: "",
}
const formData = ref<any>(
  Object.assign({}, emptyData, { province_city_district: ["", "", ""], simple_name2: [], simple_name3: false })
)
const items: Array<VbFormItem> = [
  {
    field: "parent_id",
    label: "父组织",
    required: false,
    component: OrgSelectTree,
    span: 12,
  },
  {
    field: "code",
    label: "CODE",
    required: true,
    component: ElInput,
    rules: [RULE_KEYS.REQUIRED, RULE_KEYS.MIN, RULE_KEYS.MAX],
    ruleFormat: [["CODE"], [2], [4]],
    span: 12,
  },
  {
    field: "name",
    label: "名称",
    required: true,
    component: ElInput,
    span: 12,
  },
  {
    field: "simple_name",
    label: "简称",
    component: ElInput,
    span: 12,
  },
  {
    field: "province_city_district",
    label: "省/市/区",
    component: AreaCascadeSelect,
    listeners: { change: pcdChange },
    //component: ElCascader,
    // props: {
    //   expandTrigger: "hover" as const,
    //   clearable: true,
    //   checkStrictly: true,
    //   options: areaData.value,
    // },
  },
  {
    field: "description",
    label: "描述",
    component: ElInput,
    type: "textarea",
  },
  {
    field: "simple_name",
    label: "简称",
    component: ElSelect,
    span: 12,
    data: [
      { label: "Q", value: "Q" },
      { label: "W", value: "W" },
      { label: "E", value: "E", disabled: true },
    ],
  },
  {
    field: "simple_name",
    label: "简称",
    component: ElRadioGroup,
    span: 12,
    data: [
      { label: "Q", value: "Q" },
      { label: "W", value: "W" },
      { label: "E", value: "E", disabled: true },
    ],
  },
  {
    field: "simple_name2", //多选时 对象属性应该是 []
    label: "简称2",
    component: ElCheckboxGroup,
    span: 12,
    data: [
      { label: "Q1", value: "Q" },
      { label: "W1", value: "W" },
      { label: "E1", value: "E", disabled: true },
    ],
  },
  {
    field: "simple_name3", //单选时 对象属性应该是 bool
    label: "简称3",
    component: ElCheckboxGroup,
    span: 12,
    data: [{ label: "Q1", value: "1" }],
  },
]
function pcdChange(v: Array<string>) {
  console.log("PCD", v)
  formData.value.province = v[0]
  formData.value.city = v[1]
  formData.value.district = v[2]
}
function add() {
  opreationType.value = "A"
  formData.value = Object.assign({ province_city_district: ["", "", ""] }, emptyData)
  modal.value.show()
}
function edit(row: any) {
  opreationType.value = "U"
  formData.value = Object.assign({}, row)
  modal.value.show()
}

function deleteRow(row: any) {
  //console.log("DELETE_ROW", row)
  opreationType.value = "D"
  Rs.post(saveUrl.value, { data: [row.org_id] }).then(() => {
    table.value.search()
  })
}
function onCancel() {
  //console.log("CANCEL", form)
}
function onSave() {
  if (saveUrl.value) {
    const data = Object.assign({}, emptyData)
    maper(data, formData.value)
    Rs.post(saveUrl.value, { data: data }).then(() => {
      table.value.search()
    })
  }
}
/**
 * 
   <template #form>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item
            label="父组织"
            prop="parent_id"
            required
            :rules="[{ required: true, message: '必填', trigger: 'blur' }]"
          >
            <OrgSelectTree v-model:value="formData.parent_id"></OrgSelectTree>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="CODE"
            prop="code"
            required
            :rules="[
              { required: true, message: '必填', trigger: ['blur'] },
              { min: 2, max: 4, message: '2至4个字符', trigger: ['blur'] },
            ]"
          >
            <el-input v-model="formData.code"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="名称"
            prop="name"
            required
            :rules="[{ required: true, message: '必填', trigger: ['blur'] }]"
          >
            <el-input v-model="formData.name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="简称" prop="simple_name">
            <el-input v-model="formData.simple_name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="省/市/区" prop="province_city_district">
            <AreaCascadeSelect v-model:value="province_city_district" @change="pcdChange"></AreaCascadeSelect>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="描述" prop="description">
            <el-input type="textarea" v-model="formData.description"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </template>
    <template #body>
      <VbForm :items="items" v-model:data="formData"></VbForm>
    </template>
 */
</script>

<template>
  <VbTreeTable
    ref="table"
    url="sys/organizational/selectForPage"
    method="post"
    :header="cols"
    key-field="org_id"
    children-field="children"
    :expand-depth="1"
    :interval-left="10"
    :fixed-column="true"
    :fixed-number="1"
    :fixed-right-number="1"
  >
    <template #table-tool="">
      <el-button class="ms-3 mt-0 btn btn-sm btn-primary" @click="add">新增</el-button>
    </template>
    <template #province_city_district="{ row }">
      {{
        `${row.province_name ?? ""}${row.city_name ? `/${row.city_name}` : ``}${
          row.district_name ? `/${row.district_name}` : ``
        }`
      }}
    </template>
    <template #action="{ row }">
      <span class="text-primary table-action" @click="edit(row)">编辑</span>
      <span class="text-danger table-action" @click="deleteRow(row)">删除</span>
    </template>
  </VbTreeTable>
  <VbModal
    v-model:modal="modal"
    v-model:form-data="formData"
    :form-items="items"
    backdrop="static"
    :keyboard="false"
    :title-prefix="modalTitlePrefix"
    title="组织机构"
    form-label-width="70"
    modal-body-class="px-10"
    @cancel="onCancel"
    @confirm="onSave"
  ></VbModal>
</template>