feat

components.d.ts

@@ -9,12 +9,14 @@ declare module 'vue' {
   export interface GlobalComponents {
     Address: typeof import('./src/components/widget/field/address/index.vue')['default']
     Avatar: typeof import('./src/components/avatar/index.vue')['default']
-    copy: typeof import('./src/components/widget/field/input copy/index.vue')['default']
+    Client_tag: typeof import('./src/components/widget/field/client_tag/index.vue')['default']
+    copy: typeof import('./src/components/select_order_tag copy/index.vue')['default']
     Create_form_data: typeof import('./src/components/create_form_data/index.vue')['default']
     Date_time: typeof import('./src/components/widget/field/date_time/index.vue')['default']
     Date_time_range: typeof import('./src/components/widget/field/date_time_range/index.vue')['default']
     Dd: typeof import('./src/components/name/dd.vue')['default']
     Dept: typeof import('./src/components/widget/field/dept/index.vue')['default']
+    Field: typeof import('./src/components/widget/field/index.vue')['default']
     File: typeof import('./src/components/widget/field/file/index.vue')['default']
     Image: typeof import('./src/components/widget/field/image/index.vue')['default']
     Input: typeof import('./src/components/widget/field/input/index.vue')['default']
@@ -23,14 +25,18 @@ declare module 'vue' {
     Number: typeof import('./src/components/widget/field/number/index.vue')['default']
     Order_client: typeof import('./src/components/widget/field/order_client/index.vue')['default']
     Order_product: typeof import('./src/components/widget/field/order_product/index.vue')['default']
+    Order_tag: typeof import('./src/components/widget/field/order_tag/index.vue')['default']
     Parting_line: typeof import('./src/components/widget/field/parting_line/index.vue')['default']
     Popup: typeof import('./src/components/popup/index.vue')['default']
+    Priority: typeof import('./src/components/widget/field/priority/index.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     Select: typeof import('./src/components/select/index.vue')['default']
     Select_address: typeof import('./src/components/select_address/index.vue')['default']
     Select_client: typeof import('./src/components/select_client/index.vue')['default']
-    Select_customer: typeof import('./src/components/widget/field/select_customer/index.vue')['default']
+    Select_client_tag: typeof import('./src/components/select_client_tag/index.vue')['default']
+    Select_order_tag: typeof import('./src/components/select_order_tag/index.vue')['default']
+    Select_product: typeof import('./src/components/select_product/index.vue')['default']
     Select_time: typeof import('./src/components/select_time/index.vue')['default']
     Select_user_dept: typeof import('./src/components/select_user_dept/index.vue')['default']
     Signature: typeof import('./src/components/widget/field/signature/index.vue')['default']
@@ -38,15 +44,10 @@ declare module 'vue' {
     Toast: typeof import('./src/components/toast/index.vue')['default']
     User: typeof import('./src/components/widget/field/user/index.vue')['default']
     User_dept_list: typeof import('./src/components/user_dept_list/index.vue')['default']
-    User_list: typeof import('./src/components/user_list/index.vue')['default']
-    VanButton: typeof import('vant/es')['Button']
     VanCascader: typeof import('vant/es')['Cascader']
-    VanCheckbox: typeof import('vant/es')['Checkbox']
     VanDatePicker: typeof import('vant/es')['DatePicker']
     VanPicker: typeof import('vant/es')['Picker']
     VanPopup: typeof import('vant/es')['Popup']
-    VanRadio: typeof import('vant/es')['Radio']
-    VanStepper: typeof import('vant/es')['Stepper']
     VanTimePicker: typeof import('vant/es')['TimePicker']
     Widget: typeof import('./src/components/widget/index.vue')['default']
     Wx: typeof import('./src/components/name/wx.vue')['default']

src/components/select_client/index.vue

@@ -49,7 +49,7 @@ const confirm = () => {
 // 选中客户
 const selected_client = ref<any>(props.value || {});
 
-// 产品表单
+// 客户表单
 const client_form_list = ref<FormInfo[]>([]);
 const getClientFormList = async () => {
     const msg = await api.form.TemplateLists({ template_type: [1] });

src/components/select_client_tag/index.ts

+import { createApp } from "vue";
+import Comp from "./index.vue";
+import type { Props } from "./index.vue";
+
+export const $selectClientTag = (options: Props) => {
+    const container = document.createElement("div");
+
+    options.onHide = () => {
+        vm.unmount();
+        document.body.removeChild(container);
+        container.remove();
+    };
+
+    const vm = createApp(Comp, options as any);
+    vm.mount(container);
+    document.body.appendChild(container);
+};

src/components/select_client_tag/index.vue

+<template>
+    <popupComp
+        ref="popup_comp"
+        title="选择工单标签"
+        @closed="onHide"
+        @cancel="close"
+        @confirm="confirm">
+        <div class="select_tags_box tags">
+            <div
+                class="tag"
+                v-for="tag in tags"
+                :style="{
+                    '--color': tag.label_color,
+                    '--bg_color': hexToRgba(tag.label_color),
+                }"
+                @click="select(tag)">
+                <i v-if="tag.label_icon" :class="tag.label_icon"></i>
+                <span>{{ tag.label_name }}</span>
+                <i class="icon-30 active" v-if="isSelected(tag)"></i>
+            </div>
+        </div>
+    </popupComp>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import api from "@/api";
+import { useUserTag, UserTag } from "@/utils/useTag";
+import { hexToRgba } from "@/utils/public";
+import popupComp from "@/components/popup/index.vue";
+
+export interface Props {
+    value?: any[];
+    onHide?(): void;
+    onConfirm?(value: any): void;
+}
+const props = withDefaults(defineProps<Props>(), {});
+const popup_comp = ref();
+const close = () => {
+    popup_comp.value.show = false;
+};
+const confirm = () => {
+    props.onConfirm?.(selected_tags.value);
+    close();
+};
+
+// 客户标签列表
+const { user_tags: tags } = useUserTag();
+
+// 选中标签
+const selected_tags = ref<UserTag[]>([]);
+const select = (tag: UserTag) => {
+    if (isSelected(tag)) {
+        selected_tags.value = selected_tags.value.filter(
+            (it: UserTag) => it.id != tag.id
+        );
+    } else {
+        selected_tags.value.push(tag);
+    }
+    change(selected_tags.value.map((it) => it.id));
+};
+const isSelected = (tag: UserTag) => {
+    return selected_tags.value.some((it: UserTag) => it.id == tag.id);
+};
+
+// 初始化选中标签
+const init = () => {
+    selected_tags.value = props.value || [];
+};
+init();
+</script>
+
+<style lang="less" scoped>
+.select_tags_box {
+    display: flex;
+    flex-wrap: wrap;
+    min-height: 200px;
+    align-content: flex-start;
+}
+</style>

src/components/select_order_tag/index.ts

+import { createApp } from "vue";
+import Comp from "./index.vue";
+import type { Props } from "./index.vue";
+
+export const $selectOrderTag = (options: Props) => {
+    const container = document.createElement("div");
+
+    options.onHide = () => {
+        vm.unmount();
+        document.body.removeChild(container);
+        container.remove();
+    };
+
+    const vm = createApp(Comp, options as any);
+    vm.mount(container);
+    document.body.appendChild(container);
+};

src/components/select_order_tag/index.vue

+<template>
+    <popupComp
+        ref="popup_comp"
+        title="选择工单标签"
+        @closed="onHide"
+        @cancel="close"
+        @confirm="confirm">
+        <div class="select_tags_box tags">
+            <div
+                class="tag"
+                v-for="tag in tags"
+                :style="{
+                    '--color': tag.label_color,
+                    '--bg_color': hexToRgba(tag.label_color),
+                }"
+                @click="select(tag)">
+                <i v-if="tag.label_icon" :class="tag.label_icon"></i>
+                <span>{{ tag.label_name }}</span>
+                <i class="icon-30 active" v-if="isSelected(tag)"></i>
+            </div>
+        </div>
+    </popupComp>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import api from "@/api";
+import { useOrderTag, OrderTag } from "@/utils/useTag";
+import { hexToRgba } from "@/utils/public";
+import popupComp from "@/components/popup/index.vue";
+
+export interface Props {
+    value?: any[];
+    onHide?(): void;
+    onConfirm?(value: any): void;
+}
+const props = withDefaults(defineProps<Props>(), {});
+const popup_comp = ref();
+const close = () => {
+    popup_comp.value.show = false;
+};
+const confirm = () => {
+    props.onConfirm?.(selected_tags.value);
+    close();
+};
+
+// 工单标签列表
+const { order_tag: tags } = useOrderTag();
+
+// 选中标签
+const selected_tags = ref<OrderTag[]>([]);
+const select = (tag: OrderTag) => {
+    if (isSelected(tag)) {
+        selected_tags.value = selected_tags.value.filter(
+            (it: OrderTag) => it.id != tag.id
+        );
+    } else {
+        selected_tags.value.push(tag);
+    }
+};
+const isSelected = (tag: OrderTag) => {
+    return selected_tags.value.some((it: OrderTag) => it.id == tag.id);
+};
+
+// 初始化选中标签
+const init = () => {
+    selected_tags.value = props.value || [];
+};
+init();
+</script>
+
+<style lang="less" scoped>
+.select_tags_box {
+    display: flex;
+    flex-wrap: wrap;
+    min-height: 200px;
+    align-content: flex-start;
+}
+</style>

src/components/select_product/index.ts

+import { createApp } from "vue";
+import Comp from "./index.vue";
+import type { Props } from "./index.vue";
+
+export const $selectProduct = (options: Props) => {
+    const container = document.createElement("div");
+
+    options.onHide = () => {
+        vm.unmount();
+        document.body.removeChild(container);
+        container.remove();
+    };
+
+    const vm = createApp(Comp, options as any);
+    vm.mount(container);
+    document.body.appendChild(container);
+};

src/components/select_product/index.vue

+<template>
+    <popupComp
+        ref="popup_comp"
+        title="选择产品"
+        @closed="onHide"
+        @cancel="close"
+        @confirm="confirm">
+        <div class="list">
+            <div
+                v-for="it in list"
+                class="product"
+                :class="{ active: selected_product.id == it.id }"
+                @click="selected_product = it">
+                <div class="name">
+                    <span>{{ it.product_name }}</span>
+                    <i class="icon-24" v-if="selected_product.id == it.id"></i>
+                    <i class="icon-14" v-else></i>
+                </div>
+                <div class="info">
+                    <span>产品编号:{{ it.product_number }}</span>
+                    <span>型号规格:{{ it.product_type }}</span>
+                </div>
+            </div>
+        </div>
+    </popupComp>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import api from "@/api";
+import { useDataList } from "@/utils/hook";
+import popupComp from "@/components/popup/index.vue";
+
+export interface Props {
+    value?: any;
+    onHide?(): void;
+    onConfirm?(value: any): void;
+}
+const props = withDefaults(defineProps<Props>(), {});
+const popup_comp = ref();
+const close = () => {
+    popup_comp.value.show = false;
+};
+const confirm = () => {
+    props.onConfirm?.(selected_product.value);
+    close();
+};
+
+// 选中产品
+const selected_product = ref<any>(props.value || {});
+
+// 产品表单
+const product_form_list = ref<FormInfo[]>([]);
+const getProductFormList = async () => {
+    const msg = await api.form.TemplateLists({ template_type: [2] });
+    if (msg.code == 0) {
+        product_form_list.value = msg.data.lists;
+    }
+};
+
+// 数据列表
+const params = computed(() => ({
+    api: api.product.listProduct,
+    params: {
+        form_id: product_form_list.value[0].form_id,
+        size: 1000,
+        ...props.params,
+    },
+}));
+const { list, getList } = useDataList(params);
+
+const init = async () => {
+    await getProductFormList();
+    getList();
+};
+init();
+</script>
+
+<style lang="less" scoped>
+.list {
+    display: flex;
+    flex-direction: column;
+    padding: 10px;
+    height: 400px;
+    overflow: auto;
+
+    .product {
+        display: flex;
+        flex-direction: column;
+        border: 1px solid var(--border_color);
+        border-radius: 2px;
+        cursor: pointer;
+
+        > div {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 0 14px;
+        }
+
+        .name {
+            background-color: var(--bg_gray);
+            height: 34px;
+        }
+
+        .info {
+            height: 38px;
+        }
+
+        &.active {
+            border-color: var(--blue);
+            color: var(--blue);
+
+            .name {
+                background-color: var(--hover_blue);
+            }
+        }
+    }
+
+    .product:not(:nth-last-of-type(1)) {
+        margin-bottom: 10px;
+    }
+}
+</style>

src/components/widget/field/client_tag/index.vue

+<template>
+    <div class="box">
+        <div class="label">
+            <span class="required" v-if="required">*</span>
+            <span class="title">{{ config.key_name }}</span>
+        </div>
+        <div class="content tags">
+            <!-- <span class="border" ></span> -->
+            <div
+                class="tag"
+                v-for="tag in selected_tag"
+                :style="{
+                    '--color': tag.label_color,
+                    '--bg_color': hexToRgba(tag.label_color),
+                }">
+                <i v-if="tag.label_icon" :class="tag.label_icon"></i>
+                <span>{{ tag.label_name }}</span>
+                <i class="icon-69 remove" @click="select(tag)"></i>
+            </div>
+
+            <div class="tag add" @click="selectClientTag">
+                <i class="icon-20"></i>
+                <span>添加标签</span>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import { FieldProps } from "../config";
+import { hexToRgba } from "@/utils/public.ts";
+import { $selectClientTag } from  '@/components/select_client_tag/index'
+
+const props = defineProps<FieldProps>();
+const emit = defineEmits(["edit"]);
+
+const change = () => {
+    emit("edit", {
+        [props.config.key_id]: selected_tag.value.map((it) => it.id),
+    });
+};
+
+const selected_tag = ref([]);
+
+const selectClientTag = () => {
+    $selectClientTag({
+        onConfirm: (data) => {
+            selected_tag.value = data;
+            change();
+        },
+    });
+};
+
+const init = () => {
+    selected_tag.value = props.data[props.config.key_id] || [];
+};
+init();
+</script>
+
+<style lang="less" scoped>
+@import "../global.less";
+</style>

src/components/widget/field/config.ts

@@ -136,5 +136,25 @@ export const widgetKeyName: { [key: string]: any } = {
     order_product: markRaw(
         defineAsyncComponent(() => import("./order_product/index.vue"))
     ),
+    // 优先级
+    priority: markRaw(
+        defineAsyncComponent(() => import("./priority/index.vue"))
+    ),
+    // 图片
+    image: markRaw(defineAsyncComponent(() => import("./image/index.vue"))),
+    // 附件
+    file: markRaw(defineAsyncComponent(() => import("./file/index.vue"))),
+    // 工单标签
+    order_tag: markRaw(
+        defineAsyncComponent(() => import("./order_tag/index.vue"))
+    ),
+    // 客户标签
+    client_tag: markRaw(
+        defineAsyncComponent(() => import("./client_tag/index.vue"))
+    ),
+    // 手写签名
+    signature: markRaw(
+        defineAsyncComponent(() => import("./signature/index.vue"))
+    ),
 };
 export const allFieldConfig = [...baseFieldConfig, ...upgradeFieldConfig];

src/components/widget/field/order_product/index.vue

@@ -3,18 +3,10 @@
         <div class="label">
             <span class="required" v-if="required">*</span>
             <span class="title">{{ config.key_name }}</span>
-
-            <div class="right">
-                <span>新增客户</span>
-                <span>
-                    <i class="icon-141"></i>
-                    刷新
-                </span>
-            </div>
         </div>
         <div class="content">
-            <div class="border" @click="selectClient">
-                <span>{{ client.customer_name }}</span>
+            <div class="border" @click="selectProduct">
+                <span>{{ product.product_name }}</span>
                 <i class="icon-321"></i>
             </div>
         </div>
@@ -23,10 +15,20 @@
     <div class="box">
         <div class="label">
             <span class="required" v-if="required">*</span>
-            <span class="title">联系人</span>
+            <span class="title">产品编号</span>
+        </div>
+        <div class="content">
+            <span class="border">{{ product.product_number }}</span>
+        </div>
+    </div>
+
+    <div class="box">
+        <div class="label">
+            <span class="required" v-if="required">*</span>
+            <span class="title">规格型号</span>
         </div>
         <div class="content">
-            <span class="border">{{ client.link_user_name }}</span>
+            <span class="border">{{ product.product_type }}</span>
         </div>
     </div>
 </template>
@@ -34,33 +36,27 @@
 <script setup lang="ts">
 import { ref } from "vue";
 import { FieldProps } from "../config";
-import { $selectClient } from "@/components/select_client/index";
+import { $selectProduct } from '@/components/select_product/index'
 
 const props = defineProps<FieldProps>();
 const emit = defineEmits(["edit"]);
 
 const change = () => {
-    emit("edit", {
-        [props.config.key_id]: client.value.id,
-        customer_name: client.value.link_user_name,
-        customer_phone: client.value.link_user_phone,
-    });
+    emit("edit", { [props.config.key_id]: [product.value.id] });
 };
 
-const client = ref<any>({});
+const product = ref<any>({});
 
 const init = () => {
-    client.value = props.data[props.config.key_id] || {};
+    product.value = props.data[props.config.key_id] || {};
 };
 init();
 
-const selectClient = () => {
-    $selectClient({
-        value: client.value,
+const selectProduct = () => {
+    $selectProduct({
+        value: product.value,
         onConfirm: (data) => {
-            client.value = data;
-            console.log("client", client.value);
-
+            product.value = data;
             change();
         },
     });

src/components/widget/field/order_tag/index.vue

+<template>
+    <div class="box">
+        <div class="label">
+            <span class="required" v-if="required">*</span>
+            <span class="title">{{ config.key_name }}</span>
+        </div>
+        <div class="content tags">
+            <!-- <span class="border" ></span> -->
+            <div
+                class="tag"
+                v-for="tag in selected_tag"
+                :style="{
+                    '--color': tag.label_color,
+                    '--bg_color': hexToRgba(tag.label_color),
+                }">
+                <i v-if="tag.label_icon" :class="tag.label_icon"></i>
+                <span>{{ tag.label_name }}</span>
+                <i class="icon-69 remove" @click="select(tag)"></i>
+            </div>
+
+            <div class="tag add" @click="selectOrderTag">
+                <i class="icon-20"></i>
+                <span>添加标签</span>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import { FieldProps } from "../config";
+import { hexToRgba } from "@/utils/public.ts";
+import { $selectOrderTag } from "@/components/select_order_tag/index";
+
+const props = defineProps<FieldProps>();
+const emit = defineEmits(["edit"]);
+
+const change = () => {
+    emit("edit", {
+        [props.config.key_id]: selected_tag.value.map((it) => it.id),
+    });
+};
+
+const selected_tag = ref([]);
+
+const selectOrderTag = () => {
+    $selectOrderTag({
+        onConfirm: (data) => {
+            selected_tag.value = data;
+            change();
+        },
+    });
+};
+
+const init = () => {
+    selected_tag.value = props.data[props.config.key_id] || [];
+};
+init();
+</script>
+
+<style lang="less" scoped>
+@import "../global.less";
+</style>

src/components/widget/field/priority/index.vue

+<template>
+    <div class="box">
+        <div class="label">
+            <span class="required" v-if="required">*</span>
+            <span class="title">{{ config.key_name }}</span>
+        </div>
+        <div class="content">
+            <span class="border" @click="selectPriority">{{ data[config.key_id] }}</span>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { FieldProps } from "../config";
+import { priority } from "@/utils/variable";
+import { $select } from "@/components/select/index";
+
+const props = defineProps<FieldProps>();
+const emit = defineEmits(["edit"]);
+
+const change = (data: string) => {
+    emit("edit", { [props.config.key_id]: data });
+};
+
+const selectPriority = () => {
+    $select({
+        title: "选择选项",
+        value: props.data[props.config.key_id],
+        options: priority.map((it: any) => ({
+            text: it.label,
+            value: it.label,
+        })),
+        onConfirm: (e) => {
+            change(e);
+        },
+    });
+};
+</script>
+
+<style lang="less" scoped>
+@import "../global.less";
+</style>