|
|
@@ -0,0 +1,341 @@
|
|
|
+<script setup lang="ts">
|
|
|
+import { ref, computed, nextTick } 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 { toast, dialog } from "@/core/utils/message"
|
|
|
+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
|
|
|
+}
|
|
|
+</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="edit(row)">联系人管理</span>
|
|
|
+ <span class="table-action" @click="edit(row)">设施管理</span>
|
|
|
+ <!-- <span class="table-action" @click="edit(row)">详情</span> -->
|
|
|
+ <span class="table-action" @click="edit(row)">编辑</span>
|
|
|
+ <span class="table-action" @click="edit(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>
|
zhangwy