新增巡检页面

src/router/modules/base.js

@@ -404,7 +404,7 @@ export default [
             {
                 path: '/patrol/add',
                 name: 'patrol-menu-add',
-                meta: { title: '安全巡检' },
+                meta: { title: '新增巡检' },
                 component: () => import('~src/views/patrol/add.vue'),
             },
             {

src/views/patrol/add.vue

@@ -1,11 +1,346 @@
 <!--  -->
 <template>
-    <div>新增巡检</div>
+    <div class="hc-page-box">
+        <HcNewCard ui="bgGray">
+            <template #extra>
+                <el-button
+                    hc-btn
+                    color="#e54d42"
+                    style="color: white;"
+                >
+                    <HcIcon name="delete-bin-3" />
+                    <span>清空数据</span>
+                </el-button>
+                <el-button
+                    hc-btn
+                    color="#12C060"
+                    style="color: white;"
+                >
+                    <HcIcon name="save" />
+                    <span>保存数据</span>
+                </el-button>
+            </template>
+            <el-form ref="addFormRef" :model="addForm" :rules="addRules" label-width="auto" size="large" label-position="left">
+                <el-row :gutter="20">
+                    <el-col :span="12">
+                        <el-form-item label="检查名称" prop="name">
+                            <el-input v-model="addForm.name" placeholder="请输入" />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item label="检查类别" prop="type">
+                            <el-select v-model="addForm.type" placeholder="请选择" clearable style="width:100%">
+                                <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value" />
+                            </el-select>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+                <el-row :gutter="20">
+                    <el-col :span="12">
+                        <el-form-item label="是否需要整改" prop="key3">
+                            <el-radio-group v-model="addForm.key3" class="ml-4">
+                                <el-radio label="1" size="large">需要整改</el-radio>
+                                <el-radio label="2" size="large">不要整改</el-radio>
+                            </el-radio-group>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+                <el-row :gutter="20">
+                    <el-col :span="12">
+                        <el-form-item label="整改人" prop="key4">
+                            <!-- <el-button
+                                hc-btn
+                                type="primary"
+                                @click="checkPeople"
+                            >
+                                <HcIcon name="add" />
+                                <span>点击选择</span>
+                            </el-button> -->
+                            <HcTasksUser
+         
+                                :contract-id="contractId" :project-id="projectId" :users="peoples"
+                                ui="w-full" @change="tasksUserChange"
+                            />
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+                <el-divider border-style="dashed" style="border: 1px dashed #cdd4e3;" />
+                <el-row :gutter="20">
+                    <el-col :span="12">
+                        <el-form-item label="检查部位" prop="key5">
+                            <el-button
+                                hc-btn
+                                type="primary"
+                                @click="linksRelateModalClick"
+                            >
+                                <HcIcon name="add" />
+                                <span>点击选择</span>
+                            </el-button>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+                <div style="position: relative; height: 400px">
+                    <HcTable :column="tableColumn" :datas="tableData">
+                        <template #key1="{ row }">
+                            <hc-table-input v-model="row.key1" type="textarea" />
+                        </template>
+                        <template #key2="{ row }">
+                            <hc-table-input v-model="row.key2" type="textarea" />
+                        </template>
+                        <template #key3="{ row }">
+                            <hc-table-input v-model="row.key3" type="textarea" />
+                        </template>
+                        <template #key4="{ row }">
+                            <hc-table-input v-model="row.key4" type="textarea" />
+                        </template>
+                        <template #key5="{ row }">
+                            <HcUploadFile
+                                v-if="true"
+                                :options="UploadFileOptions"
+                                @progress="HcUploadFileProgress"
+                                @success="HcUploadFileSuccess"
+                                @change="HcUploadFileChange"
+                            >
+                                <el-link type="primary">上传</el-link>
+                            </HcUploadFile>
+                            <el-image v-else style="width: 100px; height: 100px" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" />
+                        </template>
+                        <template #action="{ row }">
+                            <el-link type="danger">删除</el-link>
+                        </template>
+                    </HcTable>
+                </div>
+            </el-form>
+        </HcNewCard>
+        <hc-new-dialog :show="linksRelateModal" is-table save-text="确认关联" title="关联工程用途及部位" widths="50rem" @close="linksRelateModalClose" @save="linksRelateModalSave">
+            <div class="hc-tree-box">
+                <div class="hc-search-tree-val">
+                    <el-input v-model="searchTreeVal" block clearable placeholder="请输入名称关键词检索" @keyup="searchTreeKeyUp">
+                        <template #suffix>
+                            <HcIcon name="search-2" ui="text-xl iscusor" @click="searchTreeClick" />
+                        </template>
+                    </el-input>
+                </div>
+                <div id="hc-tree-scrollbar" v-loading="treeLoading" class="hc-tree-scrollbar" element-loading-text="获取数据中...">
+                    <el-scrollbar v-show="isSearchTree" class="scroll-bar-right-16">
+                        <div class=" node-many-tree">
+                            <HcDataTree
+                                :datas="searchTreeData"
+                                show-checkbox
+                                default-expand-all
+                                @nodeTap="wbsElTreeClick"
+                                @check="divisionTreeCheck"
+                            >
+                                <template #default="{ node, data }">{{ data.title }}</template>
+                            </HcDataTree>>
+                        </div>
+                    </el-scrollbar>
+                    <el-scrollbar v-show="!isSearchTree" class="scroll-bar-right-16">
+                        <div class=" node-many-tree">
+                            <HcLazyTree
+                                ref="wbstree"
+                                show-checkbox
+                                @check="divisionTreeCheck"
+                                @load="treeLoadNode"
+                                @nodeTap="wbsElTreeClick"
+                            >
+                                <template #default="{ node, data }">{{ data.title }}</template>
+                            </HcLazyTree>
+                        </div>
+                    </el-scrollbar>
+                </div>
+            </div>
+        </hc-new-dialog>
+    </div>
 </template>
 
 <script setup>
-import { ref, watch } from 'vue'
+import { nextTick, ref, watch } from 'vue'
+import { useAppStore } from '~src/store'
+import queryApi from '~api/data-fill/query'
+import { getArrValue, getObjValue } from 'js-fast-way'
+
+import { getTokenHeader } from '~src/api/request/header'
+const useAppState = useAppStore()
+const projectId = ref(useAppState.getProjectId)
+const contractId = ref(useAppState.getContractId)
+const addFormRef = ref(null)
+const addForm = ref({})
+const addRules = {
+    name: {
+        required: true,
+        trigger: 'blur',
+        message: '请输入名称',
+    },
+    type: {
+        required: true,
+        trigger: 'blur',
+        message: '请选择类别',
+    },
+    key3: {
+        required: true,
+        trigger: 'blur',
+        message: '请选择是否需要整改',
+    },
+    key4: {
+        required: true,
+        trigger: 'blur',
+        message: '请选择整改人',
+    },
+    key5: {
+        required: true,
+        trigger: 'blur',
+        message: '请选择检查部位',
+    },
+
+}
+//检查类别
+const typeOptions = ref([
+    { label:'安全巡检', value:1 },
+    { label:'质量巡检', value:2 },
+])
+
+const tableColumn = [
+    { key: 'key1', name: '检查项目' },
+    { key: 'key2', name: '检查内容' },
+    { key: 'key3', name: '扣分标准' },
+    { key: 'key4', name: '检查人名称' },
+    { key: 'key5', name: '图片', width:150 },
+    { key: 'action', name: '操作', width:100 },
+]
+const tableData = ref([
+    { id: 1, name: '名称1', text: '文本1', color: 'red' },
+    { id: 2, name: '名称2', text: '文本2', color: 'blue' },
+    { id: 3, name: '名称3', text: '文本3', color: '无' },
+])
+
+
+
+//上传配置
+const UploadFileOptions = {
+    //此处设置header
+    headers: getTokenHeader(),
+}
+
+// 文件上传进度
+const HcUploadFileProgress = (res) => {
+    console.log('文件上传进度', res)
+}
+// 文件上传成功的回调
+const HcUploadFileSuccess = (res) => {
+    console.log('文件上传成功', res)
+}
+
+// 文件全部上传成功
+const HcUploadFileChange = () => {
+    console.log('文件全部上传成功')
+}
+const ishowPeople = ref(false)
+//选择整改人
+const peoples = ref('')
+//任务人选择改变
+const tasksUserChange = (a, b, users) => {
+    addForm.value.key4 = users
+}
+//关联工程用途及部位
+const linksRelateModal = ref(false)
+const linksRelateModalClick = ()=>{
+    linksRelateModal.value = true
+}
+const linksRelateModalClose = ()=>{
+    linksRelateModal.value = false
+}
+const linksRelateModalSave = ()=>{
+    console.log('baocun')
+}
+const searchTreeVal = ref('')
+const isSearchTree = ref(false)
+const searchTreeHeight = ref()
+//回车
+const searchTreeKeyUp = (e) => {
+    if (e.key === 'Enter') {
+        searchTreeClick()
+    }
+}
+
+const searchTreeClick = async () => {
+    if (searchTreeVal.value) {
+        searchTreeHeight.value = document.getElementById('hc-tree-scrollbar').offsetHeight
+        isSearchTree.value = true
+        //treeLoading.value = true
+        getSearchTreeData().then()
+    } else {
+        isSearchTree.value = false
+    }
+}
+//回车
+const searchTreeData = ref([])
+const treeLoading = ref(false)
+const getSearchTreeData = async () => {
+    treeLoading.value = true
+    const { error, code, data } = await queryApi.getTreeNodeByQueryValueAndContractId({
+        contractId: contractId.value,
+        queryValue: searchTreeVal.value,
+        tableOwner:1,
+    })
+    //判断状态
+    if (!error && code === 200) {
+        let treedata = getArrValue(data)
+        searchTreeData.value = treedata
+        treeLoading.value = false
+
+    } else {
+        treeLoading.value = false
+
+        searchTreeData.value = []
+    }
+
+}
+const wbsElTreeClick = ({ node, data, keys })=>{
+    console.log(data, 'data')
+}
+const wbstree = ref(null)
+//懒加载的数据
+const treeLoadNode = async ({ node, item, level }, resolve) => {
+    let contractIdRelation = '', parentId = '', primaryKeyId = ''
+    if (level !== 0) {
+        const nodeData = getObjValue(item)
+        contractIdRelation = nodeData?.contractIdRelation || ''
+        parentId = contractIdRelation ? nodeData?.primaryKeyId : nodeData?.id
+        primaryKeyId = nodeData?.id || ''
+    }
+    //获取数据
+    const { data } = await queryApi.queryWbsTreeData({
+        contractId: contractId.value || '',
+        contractIdRelation,
+        primaryKeyId,
+        parentId,
+        // classifyType: contractTypeTabKey.value,
+         classifyType:1,
+         tableOwner:1,
+
+    })
+    resolve(getArrValue(data))
+}
+const divisionTreeItemInfo = ref({})
+const divisionTreeCheck = ({ data }) => {
+    divisionTreeItemInfo.value = data
+}
 </script>
 
 <style lang='scss' scoped>
+.bgGray{
+    background-color: rgba(32, 77, 161, 0.08);;
+}
+
+.hc-table-form-content .hc-content-box .hc-table-forem-box .hc-fixed-page {
+    .el-button {
+        display: block;
+        margin: 20px;
+    }
+}
+</style>
+
+<style  lang='scss'>
+
 </style>