UI3/src/views/server/busManage/index.vue

<script setup lang="ts">
import { ref, computed } from "vue"
import type { Header } from "@/components/Table/table-partials/models"
import Rs from "@/core/services/RequestService"
import type { VbFormItem } from "@/components/Forms/models"
import DySelect from "@/components/select/DySelect.vue"
import { ElSelect } from "element-plus"
import { dialog } from "@/core/utils/message"
import { useRouter } from "vue-router"
const router = useRouter()

const operate_status = ref<any>()
const name = ref<string>("")
const monitoring_type = ref<string>("")
const catering_scale = ref<string>("")
const catering_style = ref<string>("")
const org_id = ref<string>("")
const type = ref<string>("")

const size = ref<any>("default")
const table = ref()
const query = () => {
  const params = {
    operate_status: operate_status.value,
    name: name.value,
    monitoring_type: monitoring_type.value,
    type: type.value,
    org_id: org_id.value,
    catering_scale: catering_scale.value,
    catering_style: catering_style.value,
  }
  const keys = Object.keys(params)
  keys.forEach((key) => {
    if (params[key] === "" || params[key] === null) {
      delete params[key]
    }
  })
  queryParams.value = Object.assign({}, params)
}
const cols = ref<Array<Header>>([
  {
    name: "商户名称",
    field: "name",
    width: 230,
  },
  {
    name: "区域",
    field: "org_name",
    width: 100,
  },
  {
    name: "菜系",
    field: "catering_style_name",
  },
  {
    name: "规模",
    field: "catering_scale_name",
  },
  {
    name: "商户类型",
    field: "type_name",
  },
  {
    name: "灶头数",
    field: "stove_num",
  },
  {
    name: "排口数",
    field: "outlet_num",
  },
  {
    name: "油烟设施数量",
    field: "facilities_num",
  },
  {
    name: "净化器数量",
    field: "purifier_num",
  },
  {
    name: "监测类型",
    field: "monitoring_type_name",
  },
  {
    name: "运营状态",
    field: "operate_status_name",
  },
  {
    name: "操作",
    field: "action",
    width: 300,
  },
])
const queryParams = ref<any>({
  monitoring_type: "",
  name: "",
  operate_status: null,
  type: "",
  org_id: "",
  catering_scale: "",
  catering_style: "",
})
const reset = () => {
  monitoring_type.value = ""
  name.value = ""
  operate_status.value = null
  type.value = ""
  org_id.value = ""
  catering_scale.value = ""
  catering_style.value = ""
  queryParams.value = {
    monitoring_type: "",
    name: "",
    operate_status: "",
    type: "",
    org_id: "",
    catering_scale: "",
    catering_style: "",
  }
}
const dySearchSelectStyle = { width: "120px" }
const statusOption = ref<Array<any>>([
  {
    value: 0,
    label: "营业",
  },
  {
    value: 1,
    label: "间休",
  },
  {
    value: 2,
    label: "停业",
  },
])
//只放增改传到后台的共用参数,其余需要modal显示的参数另外定义
const emptyData = {
  company_id: [] as any[],
  operate_status: 0,
}
const formData = ref<any>({
  company_id: 0,
  operate_status: 0,
  name: "",
  monitoring_type_name: "",
  facilities_num: 0,
  org_name: "",
})
const items: Array<VbFormItem> = [
  {
    field: "name",
    label: "企业名称:",
    required: false,
    component: "innerText",
    span: 24,
  },
  {
    field: "org_name",
    label: "企业地址:",
    required: false,
    component: "innerText",
    span: 24,
  },
  {
    field: "facilities_num",
    labelWidth: 90,
    label: "监测点数量:",
    component: "innerText",
    span: 24,
  },
  {
    field: "operate_status",
    label: "当前状态:",
    class: "w-100",
    component: ElSelect,
    span: 24,
    data: [
      {
        value: 0,
        label: "营业",
      },
      {
        value: 1,
        label: "间休",
      },
      {
        value: 2,
        label: "停业",
      },
    ],
  },
]
const modal = ref<any>()
//定义需要操作的类型
const opreationType = ref<"A" | "U" | "D" | "BU">("A")
const modalTitlePrefix = computed(() => {
  return opreationType.value == "A" ? "新增" : opreationType.value == "U" || opreationType.value == "BU" ? "编辑" : ""
})

function edit(row: any) {
  opreationType.value = "U"
  formData.value = Object.assign({}, row)
  modal.value.show()
}
const selectedItems = ref<Array<any>>([])

function onSave() {
  dialog.confirm("确认更新商户状态?", "提交确认", (isConfirmed: any) => {
    if (isConfirmed.isConfirmed) {
      emptyData.company_id = [Number(formData.value.company_id)]
      emptyData.operate_status = Number(formData.value.operate_status)
      Rs.post("sys/company/updateCompanyStatus", { data: emptyData }).then(() => {
        table.value.search()
      })
    }
  })
}

const onItemsAllChange = (isChecked: boolean, rows: Array<any>) => {
  selectedItems.value = rows
}
const formatRemoteData = (data: any) => {
  return data.list
}

function contactMg(row: any) {
  console.log("---", row)
  router.push({
    path: "/server/busManage/contact",
    query: {
      name: row.name,
      id: row.company_id,
      back: 1,
    },
  })
}
function deviceMg(row: any) {
  router.push({
    path: "/server/busManage/device",
    query: {
      name: row.name,
      id: row.company_id,
      monitoring_type: row.monitoring_type,
      back: 1,
    },
  })
}
function delRow(row: any) {
  dialog.confirm(`确定删除商户${row.name}吗?`, "删除商户", (confirme: any) => {
    if (confirme.isConfirmed) {
      Rs.post("/sys/company/delByIds", { data: [row.id] }).then(() => {
        table.value.search()
      })
    }
  })
}
</script>
<template>
  <!-- :fixed-column="true"
    :fixed-number="1"
    :fixed-right-number="1"
    :scroll="{ x: 1800 }" -->
  <VbDataTable
    ref="table"
    :header="cols"
    url="sys/company/selectForPage"
    method="post"
    :query-params="queryParams"
    :has-checkbox="true"
    :check-multiple="true"
    :fixed-column="true"
    :fixed-number="1"
    :fixed-right-number="1"
    :scroll="{ x: 1800 }"
    checkbox-field="company_id"
    v-model:selectedItems="selectedItems"
    @on-items-all-change="onItemsAllChange"
  >
    <template v-slot:table-tool>
      <el-form class="align-items-center" :inline="true" :label-width="80">
        <el-form-item class="mb-0 me-5 align-items-center form-width" label="商户名称">
          <el-input class="w-100" v-model="name" placeholder="请输入商户名称" :size="size" />
        </el-form-item>
        <el-form-item class="mb-0 me-5 align-items-center form-width" label="区域">
          <OrgSelectTree v-model:value="org_id" :size="size"></OrgSelectTree>
        </el-form-item>
        <el-form-item class="mb-0 me-5 align-items-center form-width" label="菜系">
          <DySelect
            class="w-100"
            v-model="catering_style"
            :style="dySearchSelectStyle"
            url="sys/dict/getList?code=000010001&key=temp"
            placeholder="请选择"
            :size="size"
            :formatRemoteData="formatRemoteData"
          ></DySelect>
        </el-form-item>
        <el-form-item class="mb-0 me-5 align-items-center form-width" label="营业规模">
          <DySelect
            class="w-100"
            v-model="catering_scale"
            :style="dySearchSelectStyle"
            url="sys/dict/getList?code=000090001&key=temp"
            placeholder="请选择"
            :size="size"
            :formatRemoteData="formatRemoteData"
          ></DySelect>
        </el-form-item>
        <el-form-item class="mb-0 me-5 align-items-center form-width" label="监测类型">
          <DySelect
            class="w-100"
            v-model="monitoring_type"
            :style="dySearchSelectStyle"
            url="sys/dict/getCompanyMonitoringType"
            placeholder="请选择"
            :size="size"
          ></DySelect>
        </el-form-item>
        <el-form-item class="mb-0 me-5 align-items-center form-width" label="运营状态">
          <DySelect
            v-model="operate_status"
            class="w-100"
            :style="dySearchSelectStyle"
            :staticOptions="statusOption"
            placeholder="请选择"
            :size="size"
          ></DySelect>
        </el-form-item>
        <el-form-item class="mb-0 me-5 align-items-center form-width" label="商户类型">
          <DySelect
            class="w-100"
            v-model="type"
            :style="dySearchSelectStyle"
            url="sys/dict/getList?code=000200000&key=temp"
            placeholder="请选择"
            :formatRemoteData="formatRemoteData"
            :size="size"
          ></DySelect>
        </el-form-item>
        <el-form-item class="mb-0 me-0 align-items-center form-width">
          <el-button class="ms-3 mt-0 btn btn-sm btn-primary" @click="query">查询</el-button>
          <el-button class="ms-3 mt-0 btn btn-sm btn-default" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </template>
    <template #action="{ row }">
      <div class="text-danger text-center">
        <span class="table-action" @click="contactMg(row)">联系人管理</span>
        <span class="table-action" @click="deviceMg(row)">设施管理</span>
        <!-- <span class="table-action" @click="edit(row)">详情</span> -->
        <span class="table-action" @click="edit(row)">编辑</span>
        <span class="table-action" @click="delRow(row)">删除</span>
      </div>
    </template>
  </VbDataTable>
  <VbModal
    v-model:modal="modal"
    :form-data="formData"
    :form-items="items"
    backdrop="static"
    modal-dialog-style="width: 400px"
    :keyboard="false"
    :title-prefix="modalTitlePrefix"
    title="企业运营状态"
    form-label-width="90"
    modal-body-class="px-10"
    @confirm="onSave"
  ></VbModal>
</template>
<style scoped lang="scss">
// ::v-deep .el-form-item__label {
//   width: 80px !important;
// }
.form-width {
  width: 300px;
}
</style>