feat: 灰色输入框

罗广辉

2026-01-23 8c777b3d5eacd4481f2db6624e858dad38b4e153

feat: 灰色输入框

 applications/task-work-order/src/styles/common/cockpit.scss

@@ -1,6 +1,93 @@
//变量
$gd-placeholder: #86909C;
$form-bg: #F2F3F5;
$form-tips: #86909C;
$form-bg-gray: #DDE2ED;
$form-tips-gray: #A1A3D4;


.gd-input {
  --el-input-bg-color: #{$form-bg};
  --el-input-placeholder-color: #{$form-tips};

  &.gray {
    --el-input-bg-color: #{$form-bg-gray};
    --el-input-placeholder-color: #{$form-tips-gray};
  }

  .el-input__wrapper, .el-textarea__inner {
    box-shadow: none !important;
    border: none;
  }

  &.is-disabled {
    .el-input__wrapper {
      background: $form-bg;
    }
  }
}

.gd-select, {
  --bg: #{$form-bg};
  --tips: #{$form-tips};

  &.gray {
    --bg: #{$form-bg-gray};
    --tips: #{$form-tips-gray};
  }

  .el-select__wrapper {
    padding: 0 8px;
    background: var(--bg);
    box-shadow: none !important;
    border: none;
  }

  .el-select__placeholder {
    &.is-transparent {
      color: var(--tips) !important;
    }

    &.el-select__selected-item {
      color: #383874;
    }
  }
}

.gd-date-picker {
  --bg: #{$form-bg};
  --tips: #{$form-tips};

  &.gray {
    --bg: #{$form-bg-gray};
    --tips: #{$form-tips-gray};
  }

  box-shadow: none !important;
  background: var(--bg);
  border: none;
  border-radius: 5px;
  box-sizing: border-box !important;

  .el-input__wrapper {
    box-shadow: none !important;
    background-color: transparent !important;

    &.is-focus {
      box-shadow: none !important;
    }
  }

  .el-range-input {
    &::placeholder {
      color: var(--tips);
    }
  }

  .el-range-separator {
    color: #ffffff;
  }
}


.gd-table {
  height: 0;
@@ -75,68 +162,6 @@

  .fixed-column {
    background-color: #1A1A2A !important;
  }
}

.gd-input {
  .el-input__wrapper, .el-textarea__inner {
    padding: 0 8px !important;
    background: $form-bg;
    box-shadow: none !important;
    border: none;
  }

  .el-input__inner, .el-textarea__inner {
    &::placeholder {
      color: $gd-placeholder;
    }
  }


  &.is-disabled {
    .el-input__wrapper {
      background: #DDE2ED;
    }
  }
}

.gd-select {
  .el-select__input {
    color: #8ac3fd !important;
  }

  .el-select__wrapper {
    padding: 0 8px;
    background: $form-bg;
    box-shadow: none !important;
    border: none;
    width: 100%;
  }

  .el-select__placeholder {
    &.is-transparent {
      color: $gd-placeholder !important;
    }

    &.el-select__selected-item {
      color: #383874;
    }
  }

  .el-select {
    --el-select-border-color-hover: rgb(0, 162, 255) !important;
  }

  .el-input {
    --el-border-color: rgb(0, 162, 255);
  }

  .el-select .el-input__wrapper {
    background-color: #DDE2ED !important;
  }

  .el-input__wrapper {
    --el-input-text-color: #DDE2ED !important;
  }
}

@@ -218,34 +243,6 @@
  }
}

.gd-date-picker {
  box-shadow: none !important;
  background: $form-bg;
  border: none;
  border-radius: 5px;
  box-sizing: border-box !important;

  .el-input__wrapper {
    box-shadow: none !important;
    background-color: transparent !important;

    &.is-focus {
      box-shadow: none !important;
    }
  }

  .el-range-input {
    color: #fff;

    &::placeholder {
      color: $gd-placeholder;
    }
  }

  .el-range-separator {
    color: #ffffff;
  }
}

.gd-date-picker-popper {
  background: #DDE2ED !important;
@@ -489,6 +486,7 @@
  .el-dialog__body {
    overflow: auto;
    min-height: 5vh;

    .detail-title {
      margin-bottom: 10px;
      font-family: Source Han Sans CN, Source Han Sans CN;
@@ -510,6 +508,7 @@
        margin-bottom: 0;

        .label {
          display: inline-block;
          width: 88px;
          font-family: Source Han Sans CN, Source Han Sans CN;
          font-weight: 500;
@@ -618,7 +617,7 @@
        text-transform: none;
      }

      background: #F2F3F5;
      background: $form-bg;
      border: none;
      box-shadow: none;
    }
@@ -709,9 +708,6 @@
      .el-input__wrapper {
      }
    }
  }

  .gd-date-picker {
  }

  .gd-date-picker-popper {
@@ -829,7 +825,7 @@

.gd-select-popper {
  border: none;
  background: #F2F3F5 !important;
  background: $form-bg !important;

  .el-select-dropdown {
    .el-scrollbar {
@@ -853,13 +849,13 @@
    }

    .el-select-dropdown__empty {
      background: #F2F3F5;
      background: $form-bg;
      border-radius: 0px 0px 8px 8px;
    }
  }

  .el-popper__arrow::before {
    background: #F2F3F5 !important;
    background: $form-bg !important;
    border: 1px solid #F2F3F5 !important;
  }
}

 applications/task-work-order/src/views/orderView/orderDataManage/appInnovation/index.vue

@@ -2,21 +2,30 @@
    <basic-container>
        <el-form ref="queryParamsRef" :model="searchParams" class="gd-search-form">
            <el-form-item label="案例名称" prop="caseName">
                <el-input class="gd-input" v-model="searchParams.caseName" placeholder="请输入" clearable @clear="handleSearch" />
                <el-input
                    class="gd-input gray"
                    v-model="searchParams.caseName"
                    placeholder="请输入"
                    clearable
                    @clear="handleSearch"
                />
            </el-form-item>

            <el-form-item label="应用创新状态" prop="innovationStatus">
                <el-select
                    class="gd-select"
                    class="gd-select gray"
                    popper-class="gd-select-popper"
                    v-model="searchParams.innovationStatus"
                    placeholder="请选择"
                    clearable
                    @change="handleSearch"
                >
                    <el-option v-for="item in dictObj.appInnovationStatus" :key="item.dictKey"
                    <el-option
                        v-for="item in dictObj.appInnovationStatus"
                        :key="item.dictKey"
                        :label="item.dictValue"
                        :value="item.dictKey"/>
                        :value="item.dictKey"
                    />
                </el-select>
            </el-form-item>

@@ -109,10 +118,8 @@
function getDictList() {
    return getDictionaryByCode('appInnovationStatus').then(res => {
        dictObj.value = res.data.data
		
    })
}


// 获取列表
async function getList() {
@@ -179,4 +186,3 @@
})
</script>
<style scoped lang="scss"></style>


 applications/task-work-order/src/views/orderView/orderDataManage/dataObjection/index.vue

@@ -2,12 +2,18 @@
    <basic-container>
        <el-form ref="queryParamsRef" :model="searchParams" class="gd-search-form">
            <el-form-item label="异议标题" prop="title">
                <el-input class="gd-input" v-model="searchParams.title" placeholder="请输入" clearable @clear="handleSearch" />
                <el-input
                    class="gd-input gray"
                    v-model="searchParams.title"
                    placeholder="请输入"
                    clearable
                    @clear="handleSearch"
                />
            </el-form-item>

            <el-form-item label="异议状态" prop="objectionStatus">
                <el-select
                    class="gd-select"
                    class="gd-select gray"
                    popper-class="gd-select-popper"
                    v-model="searchParams.objectionStatus"
                    placeholder="请选择"
@@ -174,8 +180,6 @@
    ElMessage.success('删除成功')
    getList()
}



// 获取部门树
function getDeptTreeFun() {

 applications/task-work-order/src/views/orderView/orderDataManage/evaluate/index.vue

@@ -2,12 +2,18 @@
    <basic-container>
        <el-form ref="queryParamsRef" :model="searchParams" class="gd-search-form">
            <el-form-item label="标题" prop="title">
                <el-input class="gd-input" v-model="searchParams.title" placeholder="请输入" clearable @clear="handleSearch" />
                <el-input
                    class="gd-input gray"
                    v-model="searchParams.title"
                    placeholder="请输入"
                    clearable
                    @clear="handleSearch"
                />
            </el-form-item>

            <el-form-item label="是否解决" prop="isResolved">
                <el-select
                    class="gd-select"
                    class="gd-select gray"
                    popper-class="gd-select-popper"
                    v-model="searchParams.isResolved"
                    placeholder="请选择"

 applications/task-work-order/src/views/orderView/orderDataManage/supplyAdd/index.vue

@@ -3,7 +3,7 @@
        <el-form ref="queryParamsRef" :model="searchParams" class="gd-search-form">
            <el-form-item label="需求名称" prop="demandName">
                <el-input
                    class="gd-input"
                    class="gd-input gray"
                    v-model="searchParams.demandName"
                    placeholder="请输入"
                    clearable
@@ -13,7 +13,7 @@

            <el-form-item label="需求状态" prop="demandStatus">
                <el-select
                    class="gd-select"
                    class="gd-select gray"
                    popper-class="gd-select-popper"
                    v-model="searchParams.demandStatus"
                    placeholder="请选择"
@@ -175,7 +175,7 @@
        // 为每条记录添加部门名称
        list.value = records.map(item => ({
            ...item,
            responsibleDeptName: item.responsibleDeptName || getDeptNameById(item.responsibleDeptId, deptTree.value)
            responsibleDeptName: item.responsibleDeptName || getDeptNameById(item.responsibleDeptId, deptTree.value),
        }))
        total.value = res?.data?.data?.total ?? 0
    } finally {
@@ -234,8 +234,6 @@
    ElMessage.success('删除成功')
    getList()
}



// 获取字典
function getDictList() {

 applications/task-work-order/src/views/orderView/orderManage/clueEvents/index.vue

@@ -4,7 +4,7 @@
        <el-form ref="queryParamsRef" :model="searchParams" class="gd-search-form">
            <el-form-item label="模糊搜索" prop="patrolTaskName">
                <el-input
                    class="gd-input"
                    class="gd-input gray"
                    v-model="searchParams.patrolTaskName"
                    placeholder="请输入"
                    clearable
@@ -14,7 +14,7 @@

            <el-form-item label="巡查任务类型" prop="patrolTaskType">
                <el-select
                    class="gd-select"
                    class="gd-select gray"
                    popper-class="gd-select-popper"
                    v-model="searchParams.patrolTaskType"
                    placeholder="请选择"
@@ -50,7 +50,7 @@

            <el-form-item label="执行时间" prop="executeTime">
                <el-date-picker
                    class="gd-date-picker"
                    class="gd-date-picker gray"
                    popper-class="gd-date-picker-popper"
                    v-model="dateRange"
                    type="daterange"

 applications/task-work-order/src/views/orderView/orderManage/inspectionReport/index.vue

@@ -4,7 +4,7 @@
    <el-form ref="queryParamsRef" :model="searchParams" class="gd-search-form">
            <el-form-item label="模糊搜索" prop="nickName">
                <el-input
                    class="gd-input"
                    class="gd-input gray"
                    v-model="searchParams.nickName"
                    placeholder="请输入"
                    clearable
@@ -14,7 +14,7 @@

            <el-form-item label="文档类型" prop="resultType">
                <el-select
                    class="gd-select"
                    class="gd-select gray"
                    popper-class="gd-select-popper"
                    v-model="searchParams.resultType"
                    placeholder="请选择"
@@ -76,8 +76,16 @@
                />
            </div>
        </div>
    <el-dialog class="gd-dialog" append-to-body v-model="isShowEditView" :title="titleTxt"
        :width="pxToRem(800)" :close-on-click-modal="false" :destroy-on-close="true" @close="handleClose">
        <el-dialog
            class="gd-dialog"
            append-to-body
            v-model="isShowEditView"
            :title="titleTxt"
            :width="pxToRem(800)"
            :close-on-click-modal="false"
            :destroy-on-close="true"
            @close="handleClose"
        >
      <el-form class="gd-dialog-form" ref="ruleFormRef" :model="editParams" :rules="rules" label-width="140px">
        <el-form-item label="文档名称" prop="nickName">
          <el-input v-model="editParams.nickName" />
@@ -100,12 +108,7 @@
        </el-form-item>
        <el-form-item label="上传文件" prop="link" v-if="titleTxt === '上传巡查报告'">
            {{ uploadName }}
          <el-upload
            class="avatar-uploader"
            action=""
            :show-file-list="false"
            :before-upload="onUploadFileBefore"
          >
                    <el-upload class="avatar-uploader" action="" :show-file-list="false" :before-upload="onUploadFileBefore">
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
@@ -113,7 +116,13 @@
    <!-- </div> -->
     <template #footer>
            <el-button color="#F2F3F5" @click="isShowEditView = false">取消</el-button>
            <el-button class="save-btn" color="#4C34FF" :loading="submitting" :disabled="submitting" @click="submit(ruleFormRef)">
                <el-button
                    class="save-btn"
                    color="#4C34FF"
                    :loading="submitting"
                    :disabled="submitting"
                    @click="submit(ruleFormRef)"
                >
                保存
            </el-button>
        </template>
@@ -138,7 +147,7 @@
  import { getDictionaryByCode } from '@/api/system/dictbiz'

  const store = useStore()
  const userInfo = computed(() => store.getters.userInfo);
const userInfo = computed(() => store.getters.userInfo)

  // 初始化查询参数
const initSearchParams = () => ({
@@ -233,7 +242,12 @@
    if (!row.link) {
        ElMessage.warning('文件链接不存在')
        return
    } else if (!row.link.includes('docx') && !row.link.includes('pdf') && !row.link.includes('png') && !row.link.includes('jpg')) {
    } else if (
        !row.link.includes('docx') &&
        !row.link.includes('pdf') &&
        !row.link.includes('png') &&
        !row.link.includes('jpg')
    ) {
        ElMessage.warning(`${fileType}文件格式，可以下载再查看`)
        return
    } else if (row.link.includes('png') || row.link.includes('jpg')) {
@@ -266,7 +280,7 @@
// 勾选值设置
function handleSelectionChange(rows) {
    selectedFiles.value = rows
    selectedIds.value = rows.map((item) => item.id)
    selectedIds.value = rows.map(item => item.id)
}

// 文档下载
@@ -289,7 +303,6 @@
            }
        }, index * 300) // 300ms delay between downloads
    })

}

// 文档上传
@@ -301,8 +314,8 @@
// 上传文件前处理
function onUploadFileBefore(file) {
  // 执行文件上传
  let data = new FormData();
  data.append('file', file);
    let data = new FormData()
    data.append('file', file)
  
  fjUploadApi(data).then(res => {
    if (res.data.code === 200) {
@@ -351,7 +364,5 @@
    getDictList()
    getList()
})

</script>
<style scoped lang="scss">
</style>
<style scoped lang="scss"></style>

 applications/task-work-order/src/views/orderView/orderManage/inspectionRequest/ViewDiaLog.vue

@@ -149,7 +149,14 @@
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="巡查任务描述" prop="taskDesc">
                                <el-input class="gd-input" type="textarea" :rows="4" v-model="formData.taskDesc" placeholder="请输入" clearable />
                                <el-input
                                    class="gd-input"
                                    type="textarea"
                                    :rows="4"
                                    v-model="formData.taskDesc"
                                    placeholder="请输入"
                                    clearable
                                />
                            </el-form-item>
                        </el-col>
                    </el-row>
@@ -158,13 +165,14 @@
                <!-- 地图组件 -->
                <CommonCesiumMap
                    ref="mapRef"
                    class="leftMap gd-cesium"
                    class="gd-cesium"
                    :active="visible"
                    :flat-mode="false"
                    :terrain="true"
                    :layer-mode="4"
                    :boundary="false"
                    :zoomToBoundary="false"
                    @ready="() => mapRef.flyBoundary()"
                />
            </div>
        </div>
@@ -417,6 +425,7 @@
        width: 0;
        flex: 1;
        .gd-cesium {
            padding-top: 10px;
            width: 100%;
            height: 423px;
        }

 applications/task-work-order/src/views/orderView/orderManage/inspectionRequest/index.vue

@@ -2,12 +2,12 @@
    <basic-container>
        <el-tabs class="gd-tabs" v-model="activeName" @tab-click="tabsClick">
            <el-tab-pane label="全部 " name="all"></el-tab-pane>
            <el-tab-pane label="我的任务工单" name="my"></el-tab-pane>
            <el-tab-pane label="我的巡查任务" name="my"></el-tab-pane>
        </el-tabs>
        <el-form ref="queryParamsRef" :model="searchParams" class="gd-search-form">
            <el-form-item label="任务名称" prop="patrolTaskName">
                <el-input
                    class="gd-input"
                    class="gd-input gray"
                    v-model="searchParams.patrolTaskName"
                    placeholder="请输入"
                    clearable
@@ -17,7 +17,7 @@

            <el-form-item label="任务类型" prop="patrolTaskType">
                <el-select
                    class="gd-select"
                    class="gd-select gray"
                    popper-class="gd-select-popper"
                    v-model="searchParams.patrolTaskType"
                    placeholder="请选择"
@@ -35,7 +35,7 @@

            <el-form-item label="任务状态" prop="taskStatus">
                <el-select
                    class="gd-select"
                    class="gd-select gray"
                    popper-class="gd-select-popper"
                    v-model="searchParams.taskStatus"
                    placeholder="请选择"
@@ -53,7 +53,7 @@

            <el-form-item label="执行时间" prop="executeTime">
                <el-date-picker
                    class="gd-date-picker"
                    class="gd-date-picker gray"
                    popper-class="gd-date-picker-popper"
                    v-model="dateRange"
                    type="daterange"
@@ -118,7 +118,13 @@
        </div>

        <FormDiaLog ref="dialogRef" @success="getList" v-if="dialogVisible" v-model="dialogVisible" />
        <ViewDiaLog ref="viewDiaLogRef" @success="getList" @refusalAccept="refusalAccept" v-if="viewDiaLogVisible" v-model="viewDiaLogVisible" />
        <ViewDiaLog
            ref="viewDiaLogRef"
            @success="getList"
            @refusalAccept="refusalAccept"
            v-if="viewDiaLogVisible"
            v-model="viewDiaLogVisible"
        />
    </basic-container>
</template>
<script setup>

 applications/task-work-order/src/views/orderView/orderManage/orderManage/index.vue

@@ -7,7 +7,7 @@
        <el-form ref="queryParamsRef" :model="searchParams" class="gd-search-form">
            <el-form-item label="工单名称" prop="workOrderName">
                <el-input
                    class="gd-input"
                    class="gd-input gray"
                    v-model="searchParams.workOrderName"
                    placeholder="请输入"
                    clearable
@@ -17,7 +17,7 @@

            <el-form-item label="工单类型" prop="workOrderType">
                <el-select
                    class="gd-select"
                    class="gd-select gray"
                    popper-class="gd-select-popper"
                    v-model="searchParams.workOrderType"
                    placeholder="请选择"
@@ -35,7 +35,7 @@

            <el-form-item label="工单状态" prop="workOrderStatus">
                <el-select
                    class="gd-select"
                    class="gd-select gray"
                    popper-class="gd-select-popper"
                    v-model="searchParams.workOrderStatus"
                    placeholder="请选择"
@@ -53,7 +53,7 @@

            <el-form-item label="执行时间" prop="executeTime">
                <el-date-picker
                    class="gd-date-picker"
                    class="gd-date-picker gray"
                    popper-class="gd-date-picker-popper"
                    v-model="dateRange"
                    type="daterange"