新增部门页面

JLHWEB/src/api/modules/saleprice.ts

@@ -1,7 +1,18 @@
 import { SalePrice } from "@/api/interface/index";
+import { CommonDynamicSelect } from "@/api/modules/common";
 import { PORT1 } from "@/api/config/servicePort";
 import http from "@/api";
 
 export const getPriceList = () => {
   return http.post<SalePrice.ResPriceList>(PORT1 + `/GetPriceList`, {});
 };
+
+export const getDeptList = (params: any) => {
+  let queryParams = {};
+  let newParams = JSON.parse(JSON.stringify(params));
+  newParams.dsname = "web_deptlist";
+  newParams.queryparams = queryParams;
+  newParams.pageNum && (newParams.pageindex = newParams.pageNum);
+  newParams.pageSize && (newParams.pagesize = newParams.pageSize);
+  return CommonDynamicSelect(newParams, "web_deptlist");
+};

JLHWEB/src/enums/dwnameEnum.ts

@@ -9,5 +9,9 @@ export enum DwnameEnum {
   /**
    * @description 用户权限
    */
-  userlist = "u_user_jlhprice"
+  userlist = "u_user_jlhprice",
+  /**
+   * @description 部门
+   */
+  deptlist = "u_dept"
 }

JLHWEB/src/views/saleprice/dept/detail.vue

@@ -0,0 +1,107 @@
+<template>
+  <LjDetail
+    name="custCrmDetail"
+    ref="LjDetailRef"
+    v-bind="detailProps"
+    v-model:order-status="orderStatus"
+    :data="mainData"
+    :init-param="mainData[0]"
+    :if-fold-layout="false"
+    :if-layout-editable="false"
+    :search-col="{ xs: 1, sm: 1, md: 1, lg: 1, xl: 1 }"
+    :basic-group-col="{ xs: 1, sm: 1, md: 1, lg: 1, xl: 1 }"
+  >
+    <!-- :action="orderStatus ? orderEditAction : orderDefaultAction" -->
+  </LjDetail>
+</template>
+
+<script setup lang="tsx" name="priceListDetail">
+import { ref, watch, reactive, inject } from "vue";
+import { DwnameEnum } from "@/enums/dwnameEnum";
+import LjDetail from "@/components/LjDetail/index.vue";
+import { DetailProp } from "@/components/LjDetail/interface";
+import { useI18n } from "vue-i18n";
+import { useHooks } from "./hooks/index";
+import { useAuthButtons } from "@/hooks/useAuthButtons";
+
+interface detailProp {
+  /**
+   * @argument any 页面数据
+   */
+  data?: any;
+  /**
+   * @argument string 请求数据的api ==> 非必传
+   */
+  requestApi?: (params: any) => Promise<any>;
+  /**
+   * @argument any 基础信息，表格展示数据
+   */
+  // columns?: any;
+  /**
+   * @description 是否可编辑
+   */
+  status: "edit" | "new" | string;
+}
+
+const props = withDefaults(defineProps<detailProp>(), {});
+const { t } = useI18n();
+const { columns } = useHooks();
+const { CheckPower, CheckOption, buttonNew, buttonDefault } = useAuthButtons(t);
+
+const mainData = ref([{}]);
+
+/**
+ * @description 是否可编辑
+ */
+const orderStatus = ref("");
+
+const detailProps = reactive<DetailProp>({
+  dwname: DwnameEnum.deptlist,
+  columns: columns,
+  // detailApi: {
+  //   requestApi: getDetailData,
+  //   initParam: initParam.value
+  // },
+  header: {
+    fieldNames: {
+      code: "deptname",
+      codeLabel: t("table.u_cust.cuscode") + "：",
+      name: "name"
+    },
+    icon: "iconuser-01",
+    // icon: Close
+    // icon: (params: any) => {
+    //   console.log("detailProps params :>> ", params);
+    //   return <i class={"iconfont iconclipboard-check"}></i>;
+    // }
+    tabsProp: {
+      scrollspy: false,
+      sticky: true
+    }
+  },
+  mould: []
+});
+
+watch(
+  () => props.data,
+  val => {
+    console.log("props.data, val :>> ", val);
+    mainData.value = [val];
+    // initParam.value.cusid = val.cusid;
+
+    // getDetailData(val).then(res => {
+    //   detailData.value = res;
+    // });
+  },
+  { immediate: true }
+);
+
+watch(
+  () => props.status,
+  val => {
+    console.log("props.status val :>> ", val);
+    orderStatus.value = val;
+  },
+  { immediate: true, deep: true }
+);
+</script>

JLHWEB/src/views/saleprice/dept/hooks/index.tsx

@@ -0,0 +1,137 @@
+import { ref, reactive, computed, toRefs } from "vue";
+import { Table } from "@/hooks/interface";
+import { ColumnProps } from "@/components/LjVxeTable/interface";
+import { ALLOW_EDIT_STATE } from "@/config/index";
+
+interface defaultState {
+  /**
+   * @description 单据当前状态
+   */
+  orderStatus: string;
+}
+/**
+ * @description 表格多选数据操作
+ * @param {String} rowKey 当表格可以多选时，所指定的 id
+ * */
+export const useHooks = (t?: any) => {
+  const state = reactive<defaultState>({
+    orderStatus: ""
+  });
+
+  // 表格配置项
+  const columns: ColumnProps<any>[] = [
+    { type: "seq", title: "#", fixed: "left", width: 80 },
+    {
+      field: "deptname",
+      title: "部门名称",
+      basicinfo: {
+        el: "input",
+        editable: ALLOW_EDIT_STATE,
+        rules: [{ required: true }]
+      }
+    },
+    {
+      field: "pricelistid",
+      title: "价格表",
+      basicinfo: {
+        el: "select",
+        span: 6,
+        editable: ALLOW_EDIT_STATE,
+        rules: [{ required: true }]
+      }
+    },
+    {
+      field: "springtypename",
+      title: "弹簧分类",
+      basicinfo: {
+        el: "select",
+        span: 6,
+        editable: ALLOW_EDIT_STATE,
+        rules: [{ required: true, message: "请选择价格表", trigger: "change" }]
+      }
+    },
+    {
+      field: "profitrate",
+      title: "利润率",
+      basicinfo: {
+        el: "input",
+        editable: ALLOW_EDIT_STATE,
+        props: {
+          placeholder: "请输入利润率"
+        },
+        rules: [{ required: true, pattern: new RegExp(/^[1-9]\d*(\.\d+)?$/), message: "利润率不能为0", trigger: "change" }]
+      }
+    },
+    {
+      field: "moneyrate",
+      title: "汇率",
+      basicinfo: {
+        el: "input",
+        editable: ALLOW_EDIT_STATE,
+        props: {
+          placeholder: "请输入汇率"
+        },
+        rules: [{ required: true, pattern: new RegExp(/^[1-9]\d*(\.\d+)?$/), message: "汇率不能为0", trigger: "change" }]
+      }
+    },
+    {
+      field: "if_rate_auto",
+      title: "是否自动读取汇率",
+      datatype: "checkbox",
+      basicinfo: {
+        el: "switch",
+        editable: ALLOW_EDIT_STATE
+      }
+    },
+    {
+      field: "createtime",
+      title: "建立时间",
+      editHidden: true
+    },
+    {
+      field: "modemp",
+      title: "修改人",
+      editHidden: true
+    },
+    {
+      field: "moddate",
+      title: "修改时间",
+      editHidden: true
+    },
+    {
+      field: "auditemp",
+      title: "审核人",
+      editHidden: true
+    },
+    {
+      field: "audidate",
+      title: "审核时间",
+      editHidden: true
+    },
+    {
+      field: "manage_amt",
+      title: "部门管理费",
+      basicinfo: {
+        el: "input",
+        editable: ALLOW_EDIT_STATE,
+        props: {
+          placeholder: "请输入部门管理费"
+        },
+        rules: [{ trigger: "change" }]
+      }
+    },
+    {
+      field: "mtrltype",
+      title: "默认物料类别",
+      basicinfo: {
+        el: "tree-select",
+        editable: ALLOW_EDIT_STATE
+      }
+    }
+  ];
+
+  return {
+    ...toRefs(state),
+    columns
+  };
+};

JLHWEB/src/views/saleprice/dept/index.vue

@@ -1 +1,138 @@
-<template>123</template>
+<template>
+  <div class="table-box">
+    <LjVxeTable
+      row-key="quoteid"
+      :columns="columns"
+      :request-api="getData"
+      :data-callback="dataCallback"
+      :dwname="dwname"
+      :table-props="tableProps"
+      :table-events="tableEvents"
+    >
+      <!-- 表格 header 按钮 -->
+      <template #tableHeader>
+        <el-button-group>
+          <el-button>{{ $t("common.add") }}</el-button>
+          <el-button>{{ $t("common.delText") }}</el-button>
+          <el-button>{{ $t("common.auditText") }}</el-button>
+        </el-button-group>
+      </template>
+    </LjVxeTable>
+  </div>
+
+  <!-- <LjDrawer ref="LjDrawerRef" size="50%" :withHeader="false"> -->
+
+  <!-- </LjDrawer> -->
+  <LjDialog
+    ref="LjDrawerRef"
+    class="is-selector"
+    v-bind="{
+      ...drawerDefineProp
+    }"
+    :style="{ padding: 0 }"
+  >
+    <template #header>
+      <div class="flx-1">
+        <span class="text-h5-b">部门: {{ deptname }}</span>
+      </div>
+    </template>
+    <div class="flx-1 h-full">
+      <LjHeaderMenu :data="mainData" :action="orderStatus ? orderEditAction : orderDefaultAction" />
+      <DeptListDetail class="flx-1" :data="mainData" :status="orderStatus" />
+    </div>
+  </LjDialog>
+</template>
+
+<script setup lang="ts" name="saleprice_deptlist">
+import { ref, onMounted } from "vue";
+import { getDeptList } from "@/api/modules/saleprice";
+import { ColumnProps } from "@/components/LjVxeTable/interface";
+import LjDrawer from "@/components/LjDrawer/index.vue";
+import DeptListDetail from "./detail.vue";
+import { useHooks } from "./hooks/index";
+import LjDialog from "@/components/LjDialog/index.vue";
+import LjHeaderMenu from "@/components/LjHeaderMenu/index.vue";
+import { useI18n } from "vue-i18n";
+import { useAuthButtons } from "@/hooks/useAuthButtons";
+
+const dwname = "web_deptlist";
+const mainData = ref({});
+const tableProps = {
+  height: "auto",
+  editConfig: { trigger: "click", mode: "cell" }
+  // rowClassName: rowClsNameFunc
+  // exportConfig: {
+  //   filename: t("menu.saletaskmx") + formatToDate(new Date(), "YYYY-MM-DD HH:mm:ss")
+  // }
+};
+
+const { t } = useI18n();
+const { columns } = useHooks();
+const { CheckPower, CheckOption, buttonNew, buttonDefault } = useAuthButtons(t);
+
+const orderStatus = ref("");
+const deptname = ref("");
+
+const orderDefaultAction = [
+  buttonDefault({
+    label: t("common.cancelText"),
+    icon: "iconchevron-left"
+  }),
+  buttonNew({
+    label: t("common.saveText"),
+    icon: "iconsave-01"
+  })
+];
+const orderEditAction = [
+  buttonNew({
+    label: t("common.saveText"),
+    icon: "iconsave-01"
+  })
+];
+
+/*
+ * @description 抽屉默认属性
+ */
+const drawerDefineProp = {
+  draggable: true,
+  overflow: true,
+  width: "40%"
+  // modalClass: "lj-file-dialog"
+};
+
+onMounted(async () => {
+  //   let res = await getDeptList();
+  //   console.log("pricelist res :>> ", res);
+});
+
+const getData = (params: any) => {
+  console.log(params);
+  return getDeptList(params);
+};
+
+const dataCallback = (data: any) => {
+  console.log("data :>> ", data);
+  return {
+    list: data.datatable,
+    tableinfo: data.tableinfo,
+    total: data.totalcnt,
+    pageNum: data.pageindex,
+    pageSize: data.pagesize
+  };
+};
+
+const LjDrawerRef = ref();
+const handleDBlClickTable = ({ row, rowIndex, $rowIndex, column, columnIndex, $columnIndex, $event }: any) => {
+  // 弹窗
+  mainData.value = row;
+  deptname.value = row.deptname;
+  orderStatus.value = "edit";
+  LjDrawerRef.value.show();
+};
+
+// 返回绑定的事件
+const tableEvents = {
+  "cell-dblclick": handleDBlClickTable
+  // "cell-click": handleClickTable
+};
+</script>