暂存

src/components/PageAuth/src/page-auth.tsx

@@ -18,12 +18,7 @@ const PageAuth = defineComponent({
     const { permissions, hasPermissionWithCode } = usePermission(
       props.pageName
     );
-
-    const classes = computed(() => {
-      const { margin } = props;
-      return margin ? "" : "auth__container--nomargin";
-    });
-
+    console.log(props.pageName + "---------" + hasPermissionWithCode("001"));
     provide<AuthProvide>("Auth", {
       permissions
     });

src/components/RemoteSelect/src/remote-select.tsx

@@ -27,7 +27,13 @@ const RemoteSelect = defineComponent({
       const { responseLabelProp, responseValProp, subLabelProp, api } = props;
 
       loading.value = true;
-      const { code, data, message } = await api(params);
+
+      const model = {
+        page: 1,
+        size: 100,
+        ...params
+      };
+      const { code, data, message } = await api(model);
       loading.value = false;
 
       responseHandle({
@@ -38,14 +44,22 @@ const RemoteSelect = defineComponent({
 
           list.value = _data.map(item => ({
             ...item,
-            label: item[responseLabelProp],
-            value: item[responseValProp],
-            subLabel: item[subLabelProp]
+            status: item.status + "",
+            label: item[responseLabelProp] ? item[responseLabelProp] + "" : "",
+            value: item[responseValProp] ? item[responseValProp] + "" : "",
+            subLabel: item[subLabelProp] ? item[subLabelProp] + "" : ""
           }));
-
-          value.value = list.value[0][responseValProp];
-
-          emit("inital", list.value[0][responseValProp]);
+          if (!props.isRoot) {
+            value.value = list.value[0][responseValProp]
+              ? list.value[0][responseValProp] + ""
+              : "";
+            emit(
+              "inital",
+              list.value[0][responseValProp]
+                ? list.value[0][responseValProp] + ""
+                : ""
+            );
+          }
         }
       });
     }
@@ -73,10 +87,10 @@ const RemoteSelect = defineComponent({
 
           list.value = _data.map(item => ({
             ...item,
-            label: item[responseLabelProp],
-            value: item[responseValProp],
-            subLabel: item[subLabelProp],
-            status: item.status + "" === "0"
+            label: item[responseLabelProp] ? item[responseLabelProp] + "" : "",
+            value: item[responseValProp] ? item[responseValProp] + "" : "",
+            subLabel: item[subLabelProp] ? item[subLabelProp] + "" : "",
+            status: item.status + ""
           }));
 
           emit("listChange", unref(list));
@@ -119,7 +133,7 @@ const RemoteSelect = defineComponent({
             }
             key={item.value}
             value={item.value}
-            disabled={props.showDisabled ? item.status : false}
+            disabled={props.showDisabled ? item.status + "" === "0" : false}
           >
             <span style="float: left">{item.label}</span>
 

src/components/RemoteSelect/src/search/ComCard.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, watch } from "vue";
+import { ref } from "vue";
 import { useVModel } from "@vueuse/core";
 import { httpGroupList } from "/@/api/components/remoteSelect";
 import RemoteSelect from "../remote-select";
@@ -17,16 +17,13 @@ const remoteSelectRef = ref<any>(null);
 
 const value = useVModel(props, "modelValue");
 
-watch(
-  () => props.project_name,
-  project_name => {
-    if (!project_name && !remoteSelectRef.value) return;
-    remoteSelectRef.value.initalData({ project_name });
-  },
-  {
-    deep: true
-  }
-);
+function initalData(data) {
+  remoteSelectRef.value.initalData(data);
+}
+
+defineExpose({
+  initalData
+});
 </script>
 
 <template>

src/components/RemoteSelect/src/search/Company.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, watch } from "vue";
+import { ref } from "vue";
 import { useVModel } from "@vueuse/core";
 import { httpCompanyAll } from "/@/api/components/remoteSelect";
 import RemoteSelect from "../remote-select";
@@ -21,16 +21,13 @@ function handleChange(item) {
   emit("change", item);
 }
 
-watch(
-  () => props.project_name,
-  project_name => {
-    if (!project_name && !remoteSelectRef.value) return;
-    remoteSelectRef.value.initalData({ project_name });
-  },
-  {
-    deep: true
-  }
-);
+function initalData(data) {
+  remoteSelectRef.value.initalData(data);
+}
+
+defineExpose({
+  initalData
+});
 </script>
 
 <template>

src/hooks/usePermission.ts

@@ -20,7 +20,6 @@ export function usePermission(menuRoute?: string, processType?: string) {
   }
 
   function hasPermissionWithCode(permissionCode: string) {
-    console.log(permissions.value);
     const isHas = permissions.value.includes(permissionCode);
     return isHas;
   }

src/views/mobile/user/components/edit-dialog.vue

@@ -0,0 +1,298 @@
+<script setup lang="ts">
+import { FormRules, ElForm } from "element-plus";
+import { reactive, ref } from "vue";
+import { httpUpdate, httpDetail } from "/@/api/mobile/user";
+import { responseHandle } from "/@/utils/responseHandle";
+import { useNav } from "/@/layout/hooks/useNav";
+import { Video } from "/@/components/RemoteSelect";
+import dayjs from "dayjs";
+enum FROM_TYPE {
+  create = "create",
+  edit = "edit",
+  view = "view"
+}
+const { logout } = useNav();
+const showModel = ref(false);
+const Video_id = ref("");
+const TYPE = ref<FROM_TYPE>(FROM_TYPE.create);
+const formRef = ref<InstanceType<typeof ElForm>>(null);
+const loading = ref(false);
+const titleType = ref("");
+const id = ref("");
+const emit = defineEmits(["reload"]);
+const initform = {
+  id: "",
+  username: "",
+  company_title: "",
+  card_title: "",
+  name: "",
+  mobile: "",
+  time: [],
+  video_ids: [],
+  remark: ""
+};
+const ruleForm = ref({ ...initform });
+const rules = reactive<FormRules>({
+  username: [{ required: true, trigger: "bulr", message: "请输入账号" }],
+  company_title: [{ required: true, trigger: "bulr", message: "请输入公司" }],
+  card_title: [{ required: true, trigger: "bulr", message: "请输入卡类型" }],
+  name: [{ required: false, trigger: "bulr", message: "请输入客户姓名" }],
+  mobile: [{ required: false, trigger: "bulr", message: "请输入手机号" }],
+  video_ids: [
+    { required: true, type: "array", trigger: "change", message: "请选择视频" }
+  ],
+  time: [
+    {
+      required: true,
+      type: "array",
+      trigger: "change",
+      message: "请选择有效日期"
+    }
+  ]
+});
+
+const initData = async () => {
+  const { code, data, message } = await httpDetail({ id: id.value });
+  responseHandle({
+    code,
+    message,
+    logout,
+    handler: () => {
+      Object.keys(ruleForm.value).forEach(key => {
+        if (key === "time") {
+          const starttime = data.starttime
+            ? dayjs(data.starttime).format("YYYY-MM-DD")
+            : "";
+          const expiretime = data.expiretime
+            ? dayjs(data.expiretime).format("YYYY-MM-DD")
+            : "";
+          ruleForm.value[key] =
+            starttime && expiretime ? [starttime, expiretime] : [];
+        } else if (key === "video_ids") {
+          const { video_list } = data;
+          ruleForm.value[key] = video_list.length > 0 ? video_list : [];
+        } else {
+          ruleForm.value[key] = data[key] ? data[key] + "" : "";
+        }
+      });
+    }
+  });
+};
+async function show(node: any, did: string, isCreate: string) {
+  id.value = did;
+  loading.value = true;
+  Video_id.value = "";
+  Object.keys(ruleForm.value).forEach(key => {
+    ruleForm.value[key] = initform[key];
+  });
+  TYPE.value = isCreate;
+  switch (TYPE.value) {
+    case "create":
+      titleType.value = "新建账号";
+      break;
+    case "edit":
+      titleType.value = "编辑账号";
+      break;
+    case "view":
+      titleType.value = "账号详情";
+      break;
+    default:
+      titleType.value = "新建账号";
+  }
+
+  showModel.value = true;
+  if (TYPE.value !== "create") {
+    await initData();
+  }
+  loading.value = false;
+}
+function handleUpdate() {
+  const data = {
+    ...ruleForm.value
+  };
+
+  return {
+    data,
+    api: httpUpdate
+  };
+}
+
+function handleSave() {
+  formRef.value.validate(async vaild => {
+    if (vaild) {
+      if (loading.value) return;
+      loading.value = true;
+      const handler = handleUpdate;
+
+      loading.value = true;
+      const { api, data } = handler();
+      const { video_ids } = ruleForm.value;
+      const arr = [];
+      let model = JSON.parse(JSON.stringify(data));
+      model.starttime = dayjs(model.time[0]).format("YYYY-MM-DD");
+      model.expiretime = dayjs(model.time[1]).format("YYYY-MM-DD");
+      video_ids.forEach(item => {
+        arr.push(item.id + "");
+      });
+      model.video_ids = arr;
+      delete model["time"];
+      const { message, code } = await api(model);
+      loading.value = false;
+      responseHandle({
+        code,
+        message,
+        logout,
+        handler: () => {
+          showModel.value = false;
+          emit("reload");
+        }
+      });
+    }
+  });
+}
+
+function videoChange(e) {
+  if (e) {
+    const { id, video_name } = e;
+    const index = ruleForm.value.video_ids.findIndex(
+      e => e.id + "" === id + ""
+    );
+    if (index == -1) {
+      ruleForm.value.video_ids.push({ id, video_name });
+    }
+  }
+}
+defineExpose({
+  show
+});
+</script>
+
+<template>
+  <el-dialog
+    v-model="showModel"
+    :close-on-press-escape="false"
+    center
+    append-to-body
+    destroy-on-close
+    :width="'650px'"
+    :title="titleType"
+    v-loading="loading"
+  >
+    <el-form
+      ref="formRef"
+      :model="ruleForm"
+      :rules="rules"
+      label-width="100px"
+      style="margin-top: -10px"
+      class="demo-ruleForm"
+      status-icon
+    >
+      <el-row>
+        <el-col :span="12">
+          <el-form-item label="账号" prop="username">
+            <el-input
+              v-model="ruleForm.username"
+              :disabled="true"
+              placeholder="账号"
+            /> </el-form-item
+        ></el-col>
+        <el-col :span="12">
+          <el-form-item label="卡类型" prop="card_title">
+            <el-input
+              v-model="ruleForm.card_title"
+              :disabled="true"
+              placeholder="卡类型"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="公司" prop="company_title">
+            <el-input
+              v-model="ruleForm.company_title"
+              :disabled="true"
+              placeholder="公司"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="有效日期" prop="time">
+            <el-date-picker
+              v-model="ruleForm.time"
+              type="daterange"
+              :disabled="TYPE === 'view'"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+            /> </el-form-item
+        ></el-col>
+        <el-col :span="12">
+          <el-form-item label="客户姓名" prop="name">
+            <el-input
+              v-model="ruleForm.name"
+              :disabled="TYPE === 'view'"
+              placeholder="客户姓名"
+            /> </el-form-item
+        ></el-col>
+        <el-col :span="12">
+          <el-form-item label="手机号" prop="mobile">
+            <el-input
+              v-model="ruleForm.mobile"
+              maxlength="11"
+              :disabled="TYPE === 'view'"
+              placeholder="手机号"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="备注" prop="remark">
+            <el-input
+              v-model="ruleForm.remark"
+              type="textarea"
+              maxlength="500"
+              :disabled="TYPE === 'view'"
+              placeholder="备注"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="视频" prop="video_ids">
+            <div v-show="ruleForm.video_ids && ruleForm.video_ids.length > 0">
+              <el-tag
+                v-for="(tag, index) in ruleForm.video_ids"
+                :key="tag.id + index"
+                class="mx-1"
+                disable-transitions
+                :closable="TYPE !== 'view'"
+                size="large"
+                @close="ruleForm.video_ids.splice(index, 1)"
+              >
+                {{ tag.video_name }}
+              </el-tag>
+            </div>
+          </el-form-item></el-col
+        >
+        <el-col :span="16" v-if="TYPE !== 'view'">
+          <el-form-item label="" prop="card_id">
+            <Video
+              v-model="Video_id"
+              placeholder="请选择直播视频"
+              :showDisabled="true"
+              @change="videoChange"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="TYPE !== 'view' ? 8 : 24" class="flex justify-end">
+          <el-button
+            v-if="TYPE !== 'view'"
+            :loading="loading"
+            :disabled="loading"
+            type="primary"
+            @click="handleSave"
+            >保存</el-button
+          >
+          <el-button @click="showModel = false">取消</el-button>
+        </el-col>
+      </el-row>
+    </el-form>
+  </el-dialog>
+</template>

src/views/mobile/user/config/_details.ts

@@ -1,94 +0,0 @@
-/* eslint-disable prettier/prettier */
-import { FormConfig } from "/@/components/PageSearch";
-export const projectFormConfig: FormConfig = {
-  labelWidth: "85px",
-  formItems: [
-    {
-      label: "账户id",
-      field: "id",
-      type: "input",
-      isHidden: true,
-      placeholder: "账户id",
-      span: 24
-    },
-    {
-      label: "账户",
-      field: "username",
-      slot: "username",
-      placeholder: "账户",
-      span: 12
-    },
-    {
-      label: "添加时间",
-      field: "addtime",
-      slot: "addtime",
-      placeholder: "添加时间",
-      span: 12
-    },
-    {
-      label: "公司",
-      field: "company_title",
-      slot: "company_title",
-      placeholder: "公司",
-      span: 12
-    },
-    {
-      label: "卡类型",
-      field: "card_title",
-      slot: "card_title",
-      placeholder: "卡类型",
-      span: 12
-    },
-    {
-      label: "有效开始日期",
-      field: "starttime",
-      type: "date_picker",
-      otherOptions: {
-        type: "date",
-        format: "YYYY-MM-DD"
-      },
-      placeholder: "有效开始日期",
-      span: 12
-    },
-    {
-      label: "有效结束时间",
-      field: "expiretime",
-      type: "date_picker",
-      otherOptions: {
-        type: "date",
-        format: "YYYY-MM-DD"
-      },
-      placeholder: "有效结束时间",
-      span: 12
-    },
-    {
-      label: "姓名",
-      field: "name",
-      type: "input",
-      placeholder: "姓名",
-      span: 12
-    },
-    {
-      label: "手机号",
-      field: "mobile",
-      type: "input",
-      placeholder: "手机号",
-      span: 12
-    },
-    {
-      label: "备注",
-      field: "remark",
-      type: "textarea",
-      placeholder: "字母段",
-      span: 24
-    },
-    {
-      label: "直播视频",
-      field: "video_ids",
-      slot: "video_ids",
-      type: "array",
-      placeholder: "直播视频",
-      span: 24
-    }
-  ]
-};

src/views/mobile/user/config/_rules.ts

@@ -1,52 +0,0 @@
-import { FormRules } from "element-plus";
-import { isArray, isMobile, isChinese, isEmoticon } from "/@/utils/validate";
-export const projectFormRules: FormRules = {
-  starttime: {
-    trigger: "change",
-    required: true,
-    validator(_, value) {
-      const val = value ?? "";
-      if (val === "") return new Error("请选择有效开始日期");
-      return true;
-    }
-  },
-  expiretime: {
-    trigger: "change",
-    required: true,
-    validator(_, value) {
-      const val = value ?? "";
-      if (val === "") return new Error("请选择有效结束日期");
-      return true;
-    }
-  },
-
-  name: {
-    trigger: "change",
-    required: true,
-    validator(_, value) {
-      if (value === "") return new Error("请输入姓名！");
-      if (!isChinese(value)) return new Error("姓名必须为汉字！");
-      if (isEmoticon(value)) return new Error("姓名必须为汉字！");
-      return true;
-    }
-  },
-  mobile: {
-    trigger: "change",
-    required: true,
-    validator(_, value) {
-      if (!value || !isMobile(value)) return new Error("手机号不规范！");
-      return true;
-    }
-  },
-  video_ids: {
-    trigger: "change",
-    required: true,
-    validator(_, value) {
-      console.log(value);
-      if (!isArray(value)) return new Error("请选择直播视频");
-      const length = value.length;
-      if (length === 0) return new Error("请选择直播视频");
-      return true;
-    }
-  }
-};

src/views/mobile/user/config/content.config.ts

@@ -4,11 +4,6 @@ import { renderStatus, timeInterval } from "/@/utils/column-helper";
 import { ACCOUNT_STATUS_OPTIONS } from "/@/config/status";
 
 const columns = [
-  {
-    type: "selection",
-    width: 55,
-    hide: ({ checkList }) => !checkList.includes("勾选列")
-  },
   {
     prop: "username",
     label: "账号",

src/views/mobile/user/config/modal.config.ts

@@ -1,68 +0,0 @@
-import { ModalConfig } from "/@/components/PageModal/src/types";
-import { renderVideoList } from "/@/utils/column-helper";
-const modalConfig: ModalConfig = {
-  title: "账号",
-  colLayout: { span: 12 },
-  itemStyle: {},
-  contact: "invoice_mobile",
-  formItems: [
-    {
-      field: "username",
-      type: "input",
-      label: "账号",
-      placeholder: "账号"
-    },
-
-    {
-      field: "company_title",
-      type: "input",
-      label: "公司",
-      placeholder: "公司"
-    },
-
-    {
-      field: "card_title",
-      type: "input",
-      label: "卡类型",
-      placeholder: "卡类型"
-    },
-
-    {
-      field: "name",
-      type: "input",
-      label: "客户姓名",
-      placeholder: "客户姓名"
-    },
-    {
-      field: "mobile",
-      type: "input",
-      label: "手机号",
-      placeholder: "手机号"
-    },
-    {
-      field: "addtime",
-      type: "input",
-      label: "创建时间",
-      placeholder: "创建时间"
-    },
-
-    {
-      field: "video_list",
-      type: "array",
-      label: "直播视频",
-      slot: "video_list",
-      placeholder: "直播视频",
-      span: 24
-      // render: (_, row) => renderVideoList("video_list").cellRenderer({ row })
-    },
-    {
-      field: "remark",
-      type: "input",
-      label: "备注",
-      placeholder: "备注",
-      span: 24
-    }
-  ]
-};
-
-export default modalConfig;

src/views/mobile/user/index.vue

@@ -1,169 +1,44 @@
 <script setup lang="ts">
-import { ref, unref } from "vue";
+import { ref } from "vue";
 import { PageSearch, usePageSearch } from "/@/components/PageSearch";
 import searchConfig from "./config/search.config";
 import contentConfig from "./config/content.config";
-import PageAuth from "/@/components/PageAuth";
-import { PageModal, usePageModal } from "/@/components/PageModalShell";
-import modalConfig from "./config/modal.config";
 import { PageContent } from "/@/components/PageContent";
-import { useResponseHandle } from "/@/hooks/useAsync";
-import { httpDetail } from "/@/api/mobile/user";
-import { projectFormConfig } from "./config/_details";
-import { projectFormRules } from "./config/_rules";
 import ResetPwd from "/@/components/ResetPwd";
 import resetPwdConfig from "./config/resetPwd.config";
-
-import {
-  BasicForm,
-  transform,
-  createDefaultData
-} from "/@/components/BasicForm";
-import { Video } from "/@/components/RemoteSelect";
-import { ElForm } from "element-plus";
-const { formItems } = projectFormConfig;
-const formData = ref<Record<string, any>>(createDefaultData(formItems));
+import { usePermission } from "/@/hooks/usePermission";
+import EditModel from "./components/edit-dialog.vue";
+const modelRef = ref<InstanceType<typeof EditModel>>(null);
+const pageName = "user";
 const { pageContentRef, handleResetClick, handleSearchClick } = usePageSearch(
   undefined,
   undefined,
   searchConfig
 );
-const {
-  pageModalRef,
-  handleUpdateData,
-  handlePreviewData,
-  handleConfrim,
-  defaultInfo
-} = usePageModal({
-  pageContentRef
-});
-const resetPwdRef = ref<InstanceType<typeof ResetPwd>>(null);
-
-const responseHandle = useResponseHandle();
-const Video_id = ref("");
-async function handleDetailData(row, type) {
-  const { id } = row;
-  const { code, data, message } = await httpDetail({ id: id });
-
-  responseHandle({
-    code,
-    message,
-    handler: () => {
-      if (type === "preview") {
-        handlePreviewData(data);
-      }
-      if (type === "update") {
-        formData.value = transform(formItems, data, {
-          video_ids: "video_list"
-        });
-        columnsData = data;
-        handleUpdateData(unref(formData));
-      }
-    }
-  });
-}
-const basicFormRef = ref<InstanceType<typeof ElForm>>(null);
-function handleCreate() {
-  basicFormRef.value.validate(isValid => {
-    if (!isValid) return;
-    const { video_ids } = formData.value;
-    const params = unref(formData);
-
-    let arr = [];
-    video_ids.forEach(e => {
-      arr.push(e.id);
-    });
-    params.video_ids = arr;
-    handleConfrim("update", params);
-  });
-}
-function videoChange(e) {
-  if (e) {
-    const { id, video_name } = e;
-    const index = formData.value.video_ids.findIndex(
-      e => e.id + "" === id + ""
-    );
-    if (index == -1) {
-      formData.value.video_ids.push({ id, video_name });
-    }
-  }
+//新建/编辑/查看
+function handleAddChangeCheck(item: any, id: string, type: string) {
+  modelRef.value.show(item, id, type);
 }
+const resetPwdRef = ref<InstanceType<typeof ResetPwd>>(null);
+const { hasPermissionWithCode, permissions } = usePermission(pageName);
 </script>
 
 <template>
-  <!-- <PageAuth :pageName="pageName"> -->
-  <PageSearch
-    :form-config="searchConfig"
-    @search-btn-click="handleSearchClick"
-    @reset-btn-click="handleResetClick"
-  />
-  <PageContent
-    ref="pageContentRef"
-    :content-config="contentConfig"
-    @preview-btn-click="row => handleDetailData(row, 'preview')"
-    @update-btn-click="row => handleDetailData(row, 'update')"
-    @change-pwd-btn-click="({ id }) => resetPwdRef.show(id)"
-  />
-  <PageModal
-    ref="pageModalRef"
-    :modal-config="modalConfig"
-    :default-info="defaultInfo"
-    @confirm-btn-click="handleConfrim"
-  >
-    <BasicForm
-      ref="basicFormRef"
-      v-bind="projectFormConfig"
-      :form-data="formData"
-      :rules="projectFormRules"
-      :disabled="false"
-      label-width="120px"
-    >
-      <template #username>
-        <div>{{ formData.username }}</div>
-      </template>
-      <template #addtime>
-        <div>{{ formData.addtime }}</div>
-      </template>
-      <template #company_title>
-        <div>{{ formData.company_title }}</div>
-      </template>
-      <template #card_title>
-        <div>{{ formData.card_title }}</div>
-      </template>
-
-      <template #video_ids>
-        <div
-          v-show="formData.video_ids && formData.video_ids.length > 0"
-          style="width: 100%; padding: 0 0 15px 0"
-        >
-          <el-tag
-            v-for="(tag, index) in formData.video_ids"
-            :key="tag.id + index"
-            class="mx-1"
-            disable-transitions
-            closable
-            size="large"
-            @close="formData.video_ids.splice(index, 1)"
-          >
-            {{ tag.video_name }}
-          </el-tag>
-        </div>
-        <div style="width: 50%">
-          <Video
-            v-model="Video_id"
-            placeholder="请选择直播视频"
-            @change="videoChange"
-          />
-        </div>
-      </template>
-
-      <template #footer>
-        <div class="w-full flex justify-end">
-          <ElButton type="primary" @click="handleCreate">保存</ElButton>
-        </div>
-      </template>
-    </BasicForm>
-  </PageModal>
-  <ResetPwd ref="resetPwdRef" :modalConfig="resetPwdConfig" />
-  <!-- </PageAuth> -->
+  <PageAuth :pageName="pageName">
+    <PageSearch
+      :form-config="searchConfig"
+      @search-btn-click="handleSearchClick"
+      @reset-btn-click="handleResetClick"
+    />
+    <PageContent
+      ref="pageContentRef"
+      :powers="permissions"
+      :content-config="contentConfig"
+      @preview-btn-click="row => handleAddChangeCheck(row, row.id, 'view')"
+      @update-btn-click="row => handleAddChangeCheck(row, row.id, 'edit')"
+      @change-pwd-btn-click="({ id }) => resetPwdRef.show(id)"
+    />
+    <EditModel ref="modelRef" @reload="pageContentRef.onSearch()" />
+    <ResetPwd ref="resetPwdRef" :modalConfig="resetPwdConfig" />
+  </PageAuth>
 </template>

src/views/operate/batchCreatUser/components/edit-dialog.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { FormRules, ElForm } from "element-plus";
 import { reactive, ref } from "vue";
-import { httpAdd } from "/@/api/operate/batchCreatUser";
+import { httpAdd } from "/@/api/operate/batchSetVideo";
 import { responseHandle } from "/@/utils/responseHandle";
 import { useNav } from "/@/layout/hooks/useNav";
 import { ElMessage } from "element-plus";

src/views/operate/batchSetVideo/components/edit-dialog.vue

@@ -0,0 +1,179 @@
+<script setup lang="ts">
+import { FormRules, ElForm } from "element-plus";
+import { reactive, ref, unref } from "vue";
+import { httpAdd } from "/@/api/operate/batchSetVideo";
+import { responseHandle } from "/@/utils/responseHandle";
+import { useNav } from "/@/layout/hooks/useNav";
+import { ComCard, Video } from "/@/components/RemoteSelect";
+enum FROM_TYPE {
+  create = "create",
+  edit = "edit",
+  view = "view"
+}
+const { logout } = useNav();
+const showModel = ref(false);
+const Video_id = ref("");
+const TYPE = ref<FROM_TYPE>(FROM_TYPE.create);
+const formRef = ref<InstanceType<typeof ElForm>>(null);
+const loading = ref(false);
+const titleType = ref("");
+const id = ref("");
+const emit = defineEmits(["reload"]);
+const initform = {
+  group_id: "",
+  video_ids: []
+};
+const ruleForm = ref({ ...initform });
+const rules = reactive<FormRules>({
+  group_id: [
+    { required: true, trigger: "change", message: "请选择公司卡类型" }
+  ],
+  video_ids: [
+    {
+      required: true,
+      type: "array",
+      trigger: "change",
+      message: "请选择直播视频"
+    }
+  ]
+});
+
+async function show(node: any, did: string, isCreate: string) {
+  id.value = did;
+  Video_id.value = "";
+  Object.keys(ruleForm.value).forEach(key => {
+    ruleForm.value[key] = initform[key];
+  });
+  TYPE.value = isCreate;
+  switch (TYPE.value) {
+    case "create":
+      titleType.value = "新建批量设置视频";
+      break;
+    case "edit":
+      titleType.value = "编辑批量设置视频";
+      break;
+    case "view":
+      titleType.value = "批量设置视频详情";
+      break;
+    default:
+      titleType.value = "新建批量设置视频";
+  }
+  showModel.value = true;
+}
+
+function videoChange(e) {
+  if (e) {
+    const { id, video_name } = e;
+    const index = ruleForm.value.video_ids.findIndex(
+      e => e.id + "" === id + ""
+    );
+    if (index == -1) {
+      ruleForm.value.video_ids.push({ id, video_name });
+    }
+  }
+}
+
+function handleSave() {
+  formRef.value.validate(async vaild => {
+    if (vaild) {
+      if (loading.value) return;
+      loading.value = true;
+      const { group_id, video_ids } = ruleForm.value;
+      const params = {
+        group_id,
+        video_ids: []
+      };
+      video_ids.forEach(item => {
+        params.video_ids.push(item.id);
+      });
+      const { message, code } = await httpAdd(params);
+      loading.value = false;
+      responseHandle({
+        code,
+        message,
+        logout,
+        handler: () => {
+          showModel.value = false;
+          emit("reload");
+        }
+      });
+    }
+  });
+}
+
+defineExpose({
+  show
+});
+</script>
+
+<template>
+  <el-dialog
+    v-model="showModel"
+    :close-on-press-escape="false"
+    center
+    append-to-body
+    destroy-on-close
+    :width="'650px'"
+    :title="titleType"
+    v-loading="loading"
+  >
+    <el-form
+      ref="formRef"
+      :model="ruleForm"
+      :rules="rules"
+      label-width="100px"
+      style="margin-top: -10px"
+      class="demo-ruleForm"
+      status-icon
+    >
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="公司卡类型" prop="group_id">
+            <ComCard
+              v-model="ruleForm.group_id"
+              :showDisabled="true"
+              placeholder="公司卡类型"
+            /> </el-form-item
+        ></el-col>
+        <el-col :span="24">
+          <el-form-item label="视频" prop="video_ids">
+            <div v-show="ruleForm.video_ids && ruleForm.video_ids.length > 0">
+              <el-tag
+                v-for="(tag, index) in ruleForm.video_ids"
+                :key="tag.id + index"
+                class="mx-1"
+                disable-transitions
+                closable
+                size="large"
+                @close="ruleForm.video_ids.splice(index, 1)"
+              >
+                {{ tag.video_name }}
+              </el-tag>
+            </div>
+          </el-form-item></el-col
+        >
+        <el-col :span="16">
+          <el-form-item label="" prop="card_id">
+            <Video
+              v-model="Video_id"
+              placeholder="请选择直播视频"
+              :showDisabled="true"
+              @change="videoChange"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8" class="flex justify-end">
+          <el-button
+            v-if="TYPE !== 'view'"
+            :loading="loading"
+            :disabled="loading"
+            type="primary"
+            @click="handleSave"
+            >保存</el-button
+          >
+          <el-button @click="showModel = false">取消</el-button>
+        </el-col>
+      </el-row>
+    </el-form>
+  </el-dialog>
+</template>

src/views/operate/batchSetVideo/config/_details.ts

@@ -1,22 +0,0 @@
-/* eslint-disable prettier/prettier */
-import { FormConfig } from "/@/components/PageSearch";
-export const projectFormConfig: FormConfig = {
-  labelWidth: "85px",
-  formItems: [
-    {
-      label: "公司卡类型",
-      field: "group_id",
-      placeholder: "公司卡类型",
-      span: 24,
-      slot: "group_id"
-    },
-    {
-      label: "直播视频",
-      field: "video_ids",
-      placeholder: "直播视频",
-      span: 24,
-      type: "array",
-      slot: "video_ids"
-    }
-  ]
-};

src/views/operate/batchSetVideo/config/_rules.ts

@@ -1,13 +0,0 @@
-import { FormRules } from "element-plus";
-export const projectFormRules: FormRules = {
-  group_id: {
-    trigger: "change",
-    required: true,
-    message: "请选择公司卡类型"
-  },
-  video_ids: {
-    trigger: "change",
-    required: true,
-    message: "请选择直播视频"
-  }
-};

src/views/operate/batchSetVideo/config/modal.config.ts

@@ -1,46 +0,0 @@
-import { ModalConfig } from "/@/components/PageModal/src/types";
-import { httpList as httpCompanylist } from "/@/api/parameter/company";
-import { httpList as httpCardlist } from "/@/api/parameter/card";
-const modalConfig: ModalConfig = {
-  title: "企业商品",
-  colLayout: { span: 24 },
-  itemStyle: {},
-  contact: "batchSetVideo",
-  labelWidth: "85px",
-  formItems: [
-    {
-      field: "name",
-      type: "remote-select",
-      label: "业务企业",
-      placeholder: "业务企业",
-      otherOptions: {
-        api: httpCompanylist,
-        responseLabelProp: "title",
-        responseValPro: "id",
-        requesetProp: "",
-        isRoot: false,
-        prop: "list"
-      },
-      span: 24,
-      rules: [{ required: true, trigger: "change", message: "请选择业务企业" }]
-    },
-    {
-      field: "name2",
-      type: "remote-select",
-      label: "卡类型",
-      placeholder: "卡类型",
-      otherOptions: {
-        api: httpCardlist,
-        responseLabelProp: "title",
-        responseValPro: "id",
-        requesetProp: "",
-        isRoot: false,
-        prop: "list"
-      },
-      span: 24,
-      rules: [{ required: true, trigger: "change", message: "请选择卡类型" }]
-    }
-  ]
-};
-
-export default modalConfig;

src/views/operate/batchSetVideo/config/search.config.ts

@@ -1,6 +1,4 @@
 import { FormConfig } from "/@/components/PageSearch";
-import { STATUS_OPTIONS } from "/@/config/status";
-import { convertOptions } from "/@/utils/column-helper";
 
 const searchFormConfig: FormConfig = {
   formItems: [

src/views/operate/batchSetVideo/index.vue

@@ -1,64 +1,22 @@
 <script setup lang="ts">
-import { ref, unref } from "vue";
-import { ElForm } from "element-plus";
 import { PageSearch, usePageSearch } from "/@/components/PageSearch";
 import searchConfig from "./config/search.config";
 import contentConfig from "./config/content.config";
-import modalConfig from "./config/modal.config";
-import { PageModal, usePageModal } from "/@/components/PageModalShell";
-import { PageContent } from "/@/components/PageContent";
-import { ComCard } from "/@/components/RemoteSelect";
-import { projectFormConfig } from "./config/_details";
-import { projectFormRules } from "./config/_rules";
-import {
-  BasicForm,
-  transform,
-  createDefaultData
-} from "/@/components/BasicForm";
 import { usePermission } from "/@/hooks/usePermission";
-import { Video } from "/@/components/RemoteSelect";
-const { formItems } = projectFormConfig;
-const formData = ref<Record<string, any>>(createDefaultData(formItems));
-const basicFormRef = ref<InstanceType<typeof ElForm>>(null);
-const pageName = "batchSetVideo";
-const { hasPermissionWithCode, permissions } = usePermission(pageName);
-
-const Video_id = ref("");
+import { PageContent } from "/@/components/PageContent";
+import { ref } from "vue";
+import EditModel from "./components/edit-dialog.vue";
 const { pageContentRef, handleResetClick, handleSearchClick } = usePageSearch(
   undefined,
   undefined,
   searchConfig
 );
-const { pageModalRef, handleCreateData, handleConfrim, defaultInfo } =
-  usePageModal({
-    pageContentRef
-  });
+const pageName = "batchSetVideo";
+const modelRef = ref<InstanceType<typeof EditModel>>(null);
+const { hasPermissionWithCode, permissions } = usePermission(pageName);
 
-function handleCreate() {
-  basicFormRef.value.validate(isValid => {
-    if (!isValid) return;
-    const { video_ids } = formData.value;
-    const params = unref(formData);
-    let arr = [];
-    video_ids.forEach(item => {
-      arr.push(item.id);
-    });
-    params.video_ids = arr;
-    handleConfrim("create", params);
-  });
-}
-function videoChange(e) {
-  if (e) {
-    const { id, video_name } = e;
-    console.log(e);
-    console.log(formData);
-    const index = formData.value.video_ids.findIndex(
-      e => e.id + "" === id + ""
-    );
-    if (index == -1) {
-      formData.value.video_ids.push({ id, video_name });
-    }
-  }
+function handleAddChangeCheck(item: any, id: string, type: string) {
+  modelRef.value.show(item, id, type);
 }
 </script>
 
@@ -72,7 +30,7 @@ function videoChange(e) {
       <template #action>
         <el-button
           type="primary"
-          @click="handleCreateData"
+          @click="handleAddChangeCheck({}, '', 'create')"
           v-if="hasPermissionWithCode('002')"
         >
           新增
@@ -83,68 +41,7 @@ function videoChange(e) {
       ref="pageContentRef"
       :powers="permissions"
       :content-config="contentConfig"
-    >
-      <template #expand="{ video_name }">
-        <div style="padding: 5px 55px">
-          <el-tag
-            v-for="(tag, index) in video_name"
-            disable-transitions
-            :key="tag + index"
-            :size="'small'"
-          >
-            {{ tag }}
-          </el-tag>
-        </div>
-      </template>
-    </PageContent>
-    <PageModal
-      ref="pageModalRef"
-      :modal-config="modalConfig"
-      :default-info="defaultInfo"
-      @confirm-btn-click="handleConfrim"
-    >
-      <BasicForm
-        ref="basicFormRef"
-        v-bind="projectFormConfig"
-        :form-data="formData"
-        :rules="projectFormRules"
-        :disabled="false"
-        label-width="120px"
-      >
-        <template #group_id>
-          <ComCard v-model="formData.group_id" placeholder="公司卡类型" />
-        </template>
-        <template #video_ids>
-          <div
-            v-show="formData.video_ids && formData.video_ids.length > 0"
-            style="width: 100%; padding: 0 0 15px 0"
-          >
-            <el-tag
-              v-for="(tag, index) in formData.video_ids"
-              :key="tag.id + index"
-              class="mx-1"
-              disable-transitions
-              closable
-              size="large"
-              @close="formData.video_ids.splice(index, 1)"
-            >
-              {{ tag.video_name }}
-            </el-tag>
-          </div>
-          <div style="width: 50%">
-            <Video
-              v-model="Video_id"
-              placeholder="请选择直播视频"
-              @change="videoChange"
-            />
-          </div>
-        </template>
-        <template #footer>
-          <div class="w-full flex justify-end">
-            <ElButton type="primary" @click="handleCreate">保存</ElButton>
-          </div>
-        </template>
-      </BasicForm>
-    </PageModal>
+    />
+    <EditModel ref="modelRef" @reload="pageContentRef.onSearch()" />
   </PageAuth>
 </template>

src/views/operate/setComCard/components/edit-dialog.vue

@@ -0,0 +1,203 @@
+<script setup lang="ts">
+import { FormRules, ElForm } from "element-plus";
+import { reactive, ref } from "vue";
+import { httpUpdate, httpAdd, httpDetail } from "/@/api/operate/setComCard";
+import { responseHandle } from "/@/utils/responseHandle";
+import { useNav } from "/@/layout/hooks/useNav";
+import { Company, Card } from "/@/components/RemoteSelect";
+const remoteCompanySelectRef = ref<InstanceType<typeof Company>>(null);
+const remoteCardSelectRef = ref<InstanceType<typeof Card>>(null);
+enum FROM_TYPE {
+  create = "create",
+  edit = "edit",
+  view = "view"
+}
+const { logout } = useNav();
+const showModel = ref(false);
+const Video_id = ref("");
+const TYPE = ref<FROM_TYPE>(FROM_TYPE.create);
+const formRef = ref<InstanceType<typeof ElForm>>(null);
+const loading = ref(false);
+const titleType = ref("");
+const project_name = ref("");
+const id = ref("");
+const emit = defineEmits(["reload"]);
+const initform = {
+  company_id: "",
+  card_id: "",
+  id: ""
+};
+const ruleForm = ref({ ...initform });
+const rules = reactive<FormRules>({
+  company_id: [{ required: true, trigger: "change", message: "请选择公司" }],
+  card_id: [
+    {
+      required: true,
+      trigger: "change",
+      message: "请选择卡类型"
+    }
+  ]
+});
+
+const initData = async () => {
+  const { code, data, message } = await httpDetail({ id: id.value });
+  responseHandle({
+    code,
+    message,
+    logout,
+    handler: () => {
+      Object.keys(ruleForm.value).forEach(key => {
+        ruleForm.value[key] = data[key] ? data[key] + "" : "";
+      });
+      const { combination } = data;
+      const arr = combination.split("_");
+      if (remoteCompanySelectRef.value && arr.length === 2) {
+        (remoteCompanySelectRef.value as any).initalData({
+          title: arr[0]
+        });
+      }
+      if (remoteCardSelectRef.value && arr.length === 2) {
+        (remoteCardSelectRef.value as any).initalData({
+          title: arr[1]
+        });
+      }
+    }
+  });
+};
+async function show(node: any, did: string, isCreate: string) {
+  id.value = did;
+  loading.value = true;
+  project_name.value = "";
+  Video_id.value = "";
+  Object.keys(ruleForm.value).forEach(key => {
+    ruleForm.value[key] = initform[key];
+  });
+  TYPE.value = isCreate;
+  switch (TYPE.value) {
+    case "create":
+      titleType.value = "新建公司卡类型";
+      break;
+    case "edit":
+      titleType.value = "编辑公司卡类型";
+      break;
+    case "view":
+      titleType.value = "公司卡类型详情";
+      break;
+    default:
+      titleType.value = "新建公司卡类型";
+  }
+
+  showModel.value = true;
+  if (TYPE.value !== "create") {
+    await initData();
+  }
+  loading.value = false;
+}
+function handleUpdate() {
+  const data = {
+    ...ruleForm.value
+  };
+
+  return {
+    data,
+    api: httpUpdate
+  };
+}
+
+function handleCreate() {
+  const data = {
+    ...ruleForm.value
+  };
+
+  return {
+    data,
+    api: httpAdd
+  };
+}
+function handleSave() {
+  formRef.value.validate(async vaild => {
+    if (vaild) {
+      if (loading.value) return;
+      loading.value = true;
+      const handler =
+        TYPE.value === FROM_TYPE.create ? handleCreate : handleUpdate;
+
+      loading.value = true;
+      const { api, data } = handler();
+      const { message, code } = await api(data);
+      loading.value = false;
+      responseHandle({
+        code,
+        message,
+        logout,
+        handler: () => {
+          showModel.value = false;
+          emit("reload");
+        }
+      });
+    }
+  });
+}
+
+defineExpose({
+  show
+});
+</script>
+
+<template>
+  <el-dialog
+    v-model="showModel"
+    :close-on-press-escape="false"
+    center
+    append-to-body
+    destroy-on-close
+    :width="'650px'"
+    :title="titleType"
+    v-loading="loading"
+  >
+    <el-form
+      ref="formRef"
+      :model="ruleForm"
+      :rules="rules"
+      label-width="100px"
+      style="margin-top: -10px"
+      class="demo-ruleForm"
+      status-icon
+    >
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="公司" prop="company_id">
+            <Company
+              ref="remoteCompanySelectRef"
+              v-model="ruleForm.company_id"
+              :disabled="TYPE === 'view'"
+              :showDisabled="true"
+              placeholder="公司"
+            /> </el-form-item
+        ></el-col>
+        <el-col :span="24">
+          <el-form-item label="卡类型" prop="card_id">
+            <Card
+              ref="remoteCardSelectRef"
+              v-model="ruleForm.card_id"
+              :disabled="TYPE === 'view'"
+              :showDisabled="true"
+              placeholder="卡类型"
+            /> </el-form-item
+        ></el-col>
+
+        <el-col :span="24" class="flex justify-end">
+          <el-button
+            v-if="TYPE !== 'view'"
+            :loading="loading"
+            :disabled="loading"
+            type="primary"
+            @click="handleSave"
+            >保存</el-button
+          >
+          <el-button @click="showModel = false">取消</el-button>
+        </el-col>
+      </el-row>
+    </el-form>
+  </el-dialog>
+</template>

src/views/operate/setComCard/config/_details.ts

@@ -1,30 +0,0 @@
-/* eslint-disable prettier/prettier */
-import { FormConfig } from "/@/components/PageSearch";
-export const projectFormConfig: FormConfig = {
-  formItems: [
-    {
-      label: "公司",
-      field: "company_id",
-      placeholder: "公司",
-      span: 24,
-
-      slot: "company_id"
-    },
-    {
-      label: "卡类型",
-      field: "card_id",
-      placeholder: "卡类型",
-      span: 24,
-
-      slot: "card_id"
-    },
-
-    {
-      label: "备注",
-      field: "remark",
-      type: "textarea",
-      placeholder: "备注",
-      span: 24
-    }
-  ]
-};

src/views/operate/setComCard/config/_rules.ts

@@ -1,14 +0,0 @@
-import { FormRules } from "element-plus";
-import { isArray, validUpperCase } from "/@/utils/validate";
-export const projectFormRules: FormRules = {
-  company_id: {
-    trigger: "change",
-    required: true,
-    message: "请选择公司"
-  },
-  card_id: {
-    trigger: "change",
-    required: true,
-    message: "请选择卡类型"
-  }
-};

src/views/operate/setComCard/config/content.config.ts

@@ -1,51 +1,38 @@
 import { ContentConfig } from "/@/components/PageContent";
-import {
-  httpList,
-  httpAdd,
-  httpUpdate,
-  httpStatus,
-  httpDelete
-} from "/@/api/operate/setComCard";
+import { httpList, httpStatus, httpDelete } from "/@/api/operate/setComCard";
 import { renderStatus } from "/@/utils/column-helper";
 import { STATUS_OPTIONS } from "/@/config/status";
 
 const columns = [
-  {
-    type: "selection",
-    width: 55,
-    hide: ({ checkList }) => !checkList.includes("勾选列")
-  },
-
-  {
-    prop: "id",
-    label: "ID"
-  },
   {
     prop: "company_title",
+    "min-width": "200px",
     label: "公司名称"
   },
 
   {
     prop: "card_title",
+    "min-width": "120px",
     label: "卡类型"
   },
 
   {
     prop: "status",
     label: "状态",
+    "min-width": "80px",
     ...renderStatus(STATUS_OPTIONS)
   },
 
   {
     prop: "addtime",
-    label: "创建时间",
-    sortable: true
+    "min-width": "150px",
+    label: "创建时间"
   },
 
   {
     label: "操作",
     fixed: "right",
-    width: 160,
+    width: 140,
     slot: "operation"
   }
 ];
@@ -54,9 +41,7 @@ const contentConfig: ContentConfig = {
   title: "商品管理",
   columns,
   apis: {
-    httpAdd,
     httpList,
-    httpUpdate,
     httpStatus,
     httpDelete
   }

src/views/operate/setComCard/config/modal.config.ts

@@ -1,41 +0,0 @@
-import { ModalConfig } from "/@/components/PageModal/src/types";
-import { httpList as httpCompanylist } from "/@/api/parameter/company";
-import { httpList as httpCardlist } from "/@/api/parameter/card";
-const modalConfig: ModalConfig = {
-  title: "企业商品",
-  colLayout: { span: 24 },
-  itemStyle: {},
-  contact: "setComCard",
-  labelWidth: "85px",
-  formItems: [
-    {
-      field: "combination",
-      type: "remote-select",
-      label: "公司卡类型",
-      placeholder: "公司卡类型",
-      labelWidth: "85px",
-      otherOptions: {
-        api: httpCompanylist,
-        requesetProp: "title",
-        responseLabelProp: "title",
-        responseValPro: "id",
-        prop: "list"
-      },
-      span: 24,
-      rules: [
-        { required: true, trigger: "change", message: "请选择公司卡类型" }
-      ]
-    },
-    {
-      field: "remark",
-      type: "input",
-      labelWidth: "85px",
-      label: "备注",
-      placeholder: "备注",
-      span: 24,
-      rules: [{ required: true, trigger: "change", message: "请输入备注" }]
-    }
-  ]
-};
-
-export default modalConfig;

src/views/operate/setComCard/config/search.config.ts

@@ -1,26 +1,19 @@
-import { ModalConfig } from "/@/components/PageModal/src/types";
-import { isLicense } from "/@/utils/validate";
+import { FormConfig } from "/@/components/PageSearch";
 
-const modalConfig: ModalConfig = {
-  title: "服务",
-  itemStyle: {},
-  contact: "setService",
-  labelWidth: "100px",
+const searchFormConfig: FormConfig = {
   formItems: [
     {
       field: "company_title",
       type: "input",
-      label: "公司",
       placeholder: "公司"
     },
 
     {
       field: "card_title",
       type: "input",
-      label: "卡类型",
       placeholder: "卡类型"
     }
   ]
 };
 
-export default modalConfig;
+export default searchFormConfig;

src/views/operate/setComCard/index.vue

@@ -2,124 +2,49 @@
 import { PageSearch, usePageSearch } from "/@/components/PageSearch";
 import searchConfig from "./config/search.config";
 import contentConfig from "./config/content.config";
-import PageAuth from "/@/components/PageAuth";
-import { PageModal, usePageModal } from "/@/components/PageModalShell";
-import modalConfig from "./config/modal.config";
+import { usePermission } from "/@/hooks/usePermission";
 import { PageContent } from "/@/components/PageContent";
-import { Company, Card } from "/@/components/RemoteSelect";
-import { projectFormConfig } from "./config/_details";
-import { projectFormRules } from "./config/_rules";
-import {
-  BasicForm,
-  transform,
-  createDefaultData
-} from "/@/components/BasicForm";
-import { ElImage } from "element-plus";
-import { httpDetail } from "/@/api/operate/setComCard";
-import { ElForm } from "element-plus";
-import { ref, unref } from "vue";
-import dayjs from "dayjs";
-import { useResponseHandle } from "/@/hooks/useAsync";
-const responseHandle = useResponseHandle();
-// import { httpDetail } from "/@/api/parameter/video";
+import { ref } from "vue";
+import EditModel from "./components/edit-dialog.vue";
+const pageName = "setComCard";
 const { pageContentRef, handleResetClick, handleSearchClick } = usePageSearch(
   undefined,
   undefined,
   searchConfig
 );
-const {
-  pageModalRef,
-  handleUpdateData,
-  handleCreateData,
-  handlePreviewData,
-  handleConfrim,
-  defaultInfo
-} = usePageModal({
-  pageContentRef
-});
 
-const { formItems } = projectFormConfig;
-
-const basicFormRef = ref<InstanceType<typeof ElForm>>(null);
-const formData = ref<Record<string, any>>(createDefaultData(formItems));
-function handleCreate() {
-  basicFormRef.value.validate(isValid => {
-    if (!isValid) return;
-    const params = unref(formData);
-    const { starttime, endtime, expiretime } = params;
-    params.starttime = starttime ? dayjs(starttime).format("YYYY-MM-DD") : "";
-    params.endtime = endtime ? dayjs(endtime).format("YYYY-MM-DD") : "";
-    params.expiretime = expiretime
-      ? dayjs(expiretime).format("YYYY-MM-DD")
-      : "";
-    if (
-      new Date(params.starttime).valueOf() >= new Date(params.endtime).valueOf()
-    ) {
-      ElImage.warning("活动开始日期不能大于活动结束日期！");
-      return;
-    }
-    handleConfrim("create", params);
-  });
-}
-async function handleDetailData(row, type) {
-  const { id } = row;
-  const { code, data, message } = await httpDetail({ id: id });
-  responseHandle({
-    code,
-    message,
-    handler: () => {
-      if (type === "preview") {
-        handlePreviewData(data);
-      }
-      if (type === "update") {
-        formData.value = transform(formItems, data, {});
-        handleUpdateData(data);
-      }
-    }
-  });
+const modelRef = ref<InstanceType<typeof EditModel>>(null);
+const { hasPermissionWithCode, permissions } = usePermission(pageName);
+console.log(hasPermissionWithCode("001"));
+function handleAddChangeCheck(item: any, id: string, type: string) {
+  modelRef.value.show(item, id, type);
 }
 </script>
 
 <template>
-  <!-- <PageAuth :pageName="pageName"> -->
-  <PageSearch
-    :form-config="searchConfig"
-    @search-btn-click="handleSearchClick"
-    @reset-btn-click="handleResetClick"
-  />
-  <PageContent
-    ref="pageContentRef"
-    :content-config="contentConfig"
-    @create-btn-click="handleCreateData"
-    @preview-btn-click="row => handleDetailData(row, 'preview')"
-    @update-btn-click="row => handleDetailData(row, 'update')"
-  />
-  <PageModal
-    ref="pageModalRef"
-    :modal-config="modalConfig"
-    :default-info="defaultInfo"
-    @confirm-btn-click="handleConfrim"
-  >
-    <BasicForm
-      ref="basicFormRef"
-      v-bind="projectFormConfig"
-      :form-data="formData"
-      :rules="projectFormRules"
-      :disabled="false"
-      label-width="120px"
+  <PageAuth :pageName="pageName">
+    <PageSearch
+      :form-config="searchConfig"
+      @search-btn-click="handleSearchClick"
+      @reset-btn-click="handleResetClick"
     >
-      <template #company_id>
-        <Company v-model="formData.company_id" placeholder="公司" />
-      </template>
-      <template #card_id>
-        <Card v-model="formData.card_id" placeholder="卡类型" />
-      </template>
-      <template #footer>
-        <div class="w-full flex justify-end">
-          <ElButton type="primary" @click="handleCreate">保存</ElButton>
-        </div>
+      <template #action>
+        <el-button
+          type="primary"
+          @click="handleAddChangeCheck({}, '', 'create')"
+          v-if="hasPermissionWithCode('002')"
+        >
+          新增
+        </el-button>
       </template>
-    </BasicForm>
-  </PageModal>
-  <!-- </PageAuth> -->
+    </PageSearch>
+    <PageContent
+      ref="pageContentRef"
+      :powers="permissions"
+      :content-config="contentConfig"
+      @preview-btn-click="row => handleAddChangeCheck(row, row.id, 'view')"
+      @update-btn-click="row => handleAddChangeCheck(row, row.id, 'edit')"
+    />
+    <EditModel ref="modelRef" @reload="pageContentRef.onSearch()" />
+  </PageAuth>
 </template>

src/views/operate/setService/components/edit-dialog.vue

@@ -12,6 +12,8 @@ enum FROM_TYPE {
   edit = "edit",
   view = "view"
 }
+const remoteCompanySelectRef = ref<InstanceType<typeof Company>>(null);
+const remoteCardSelectRef = ref<InstanceType<typeof Card>>(null);
 const { logout } = useNav();
 const showModel = ref(false);
 const TYPE = ref<FROM_TYPE>(FROM_TYPE.create);
@@ -78,11 +80,23 @@ const initData = async () => {
           ruleForm.value[key] = data[key] ? data[key] + "" : "";
         }
       });
+      const { company_title, card_title } = data;
+      if (remoteCompanySelectRef.value) {
+        (remoteCompanySelectRef.value as any).initalData({
+          title: company_title
+        });
+      }
+      if (remoteCardSelectRef.value) {
+        (remoteCardSelectRef.value as any).initalData({
+          title: card_title
+        });
+      }
     }
   });
 };
 async function show(node: any, did: string, isCreate: string) {
   id.value = did;
+  loading.value = true;
   Object.keys(ruleForm.value).forEach(key => {
     ruleForm.value[key] = initform[key];
   });
@@ -100,11 +114,12 @@ async function show(node: any, did: string, isCreate: string) {
     default:
       titleType.value = "新建服务";
   }
+
+  showModel.value = true;
   if (TYPE.value !== "create") {
     await initData();
   }
-
-  showModel.value = true;
+  loading.value = false;
 }
 
 function handleUpdate() {
@@ -198,6 +213,7 @@ defineExpose({
         <el-col :span="12">
           <el-form-item label="企业名称" prop="company_id">
             <Company
+              ref="remoteCompanySelectRef"
               v-model="ruleForm.company_id"
               :disabled="TYPE === 'view'"
               placeholder="企业名称"
@@ -206,6 +222,7 @@ defineExpose({
         <el-col :span="6">
           <el-form-item label="卡类型" prop="card_id">
             <Card
+              ref="remoteCardSelectRef"
               v-model="ruleForm.card_id"
               :disabled="TYPE === 'view'"
               placeholder="卡类型"

src/views/operate/setTheme/cpns/addModel.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
-import { computed, ref, watchEffect, reactive, unref } from "vue";
+import { httpAdd, httpDetail, httpUpdate } from "/@/api/operate/setTheme";
+import { ref, reactive } from "vue";
 import { ActionType } from "/@/components/PageContent";
 import { createBasicTitle } from "./utils/create-basic-title";
 import { ElForm, ElMessage } from "element-plus";
-import type { FormInstance, FormRules } from "element-plus";
+import type { FormInstance } from "element-plus";
 import { projectFormRules } from "../config/_rules";
 import { ComCard } from "/@/components/RemoteSelect";
 import { STATUS_OPTIONS } from "/@/config/status";
@@ -11,8 +12,9 @@ import LadderTable from "./ladder-table.vue";
 import LadderModal from "./ladder-modal.vue";
 import { useNav } from "/@/layout/hooks/useNav";
 import OrderDialog from "/@/components/PageListModal";
+import { responseHandle } from "/@/utils/responseHandle";
 const { logout } = useNav();
-import { httpAdd, httpDetail, httpUpdate } from "/@/api/operate/setTheme";
+const remoteComCardSelectRef = ref<InstanceType<typeof ComCard>>(null);
 const ladderModalRef = ref<InstanceType<typeof LadderModal>>(null);
 const modelRef = ref<InstanceType<typeof OrderDialog>>(null);
 const emit = defineEmits(["reload"]);
@@ -39,8 +41,6 @@ const form = {
   modular4_data: []
 };
 const ruleForm = reactive({ ...form });
-const basicFormRef = ref<InstanceType<typeof ElForm>>(null);
-
 const type = ref<ActionType>("preview");
 const dialogVisible = ref(false);
 const confirmLoading = ref(false);
@@ -68,8 +68,6 @@ const submitForm = async (formEl: FormInstance | undefined) => {
           title: i < 3 ? "" : ruleForm[`modular${i}_title`],
           data: ruleForm[`modular${i}_data`]
         };
-        // const data = JSON.parse(JSON.stringify(modela.data))
-        // da
         model.modular.push(modela);
       }
       let res = {};
@@ -79,16 +77,18 @@ const submitForm = async (formEl: FormInstance | undefined) => {
       } else {
         res = await httpUpdate(model);
       }
-      const { code: hcode, data, message } = res;
+      const { code: hcode, message } = res;
+
+      responseHandle({
+        code: hcode,
+        message,
+        logout,
+        handler: () => {
+          emit("reload", {});
+        }
+      });
+      dialogVisible.value = false;
       confirmLoading.value = false;
-      if (hcode === 0) {
-        dialogVisible.value = false;
-        emit("reload", {});
-      } else if (hcode >= 100 && hcode <= 104) {
-        logout();
-      } else {
-        ElMessage.warning(message);
-      }
     } else {
       console.log("error submit!", fields);
     }
@@ -126,43 +126,48 @@ function handleAddOrder(list) {
   });
 }
 const initData = async () => {
-  if (confirmLoading.value) return;
-  confirmLoading.value = true;
   const { code, data, message } = await httpDetail({ id: uID.value });
-  if (code === 0) {
-    const { id, code, group_id, modular } = data;
-    ruleForm.id = id;
-    ruleForm.code = code;
-    ruleForm.group_id = group_id;
-    modular.forEach(item => {
-      const { type } = item;
-      ruleForm[`modular${type}_type`] = type + "";
-      ruleForm[`modular${type}_status`] = item?.status + "" || "";
-      ruleForm[`modular${type}_title`] = item?.title + "" || "";
-      ruleForm[`modular${type}_data`] = item?.data || [];
-    });
-  } else if (code >= 100 && code <= 104) {
-    logout();
-  } else {
-    ElMessage.warning(message);
-  }
-  confirmLoading.value = false;
+  responseHandle({
+    code,
+    message,
+    logout,
+    handler: () => {
+      const { id, code, group_id, modular } = data;
+      ruleForm.id = id;
+      ruleForm.code = code;
+      ruleForm.group_id = group_id;
+      modular.forEach(item => {
+        const { type } = item;
+        ruleForm[`modular${type}_type`] = type + "";
+        ruleForm[`modular${type}_status`] = item?.status + "" || "";
+        ruleForm[`modular${type}_title`] = item?.title + "" || "";
+        ruleForm[`modular${type}_data`] = item?.data || [];
+      });
+      const { combination } = data;
+      if (remoteComCardSelectRef.value) {
+        (remoteComCardSelectRef.value as any).initalData({
+          combination: combination ?? ""
+        });
+      }
+    }
+  });
 };
 defineExpose({
   onShow: async (basicTitle: string, readonly: ActionType, id: string) => {
     type.value = readonly;
+    dialogVisible.value = true;
     const readTitle = createBasicTitle(type.value);
     title.value =
       readonly == "preview" ? basicTitle + readTitle : readTitle + basicTitle;
     Object.keys(ruleForm).forEach(key => {
       ruleForm[key] = form[key];
     });
-    dialogVisible.value = true;
-    confirmLoading.value = false;
+
     uID.value = id;
     if (type.value !== "create") {
       await initData();
     }
+    confirmLoading.value = false;
   }
 });
 </script>
@@ -193,7 +198,11 @@ defineExpose({
         </el-col>
         <el-col :span="16">
           <el-form-item label="公司卡类型" prop="group_id">
-            <ComCard v-model="ruleForm.group_id" placeholder="公司卡类型" />
+            <ComCard
+              ref="remoteComCardSelectRef"
+              v-model="ruleForm.group_id"
+              placeholder="公司卡类型"
+            />
           </el-form-item>
         </el-col>
         <el-col :span="24">