新建项目中展示赋码和标签

luohairen

2024-12-26 7379f2bcf71fe80d021eb7f2118991525e41ea7e

新建项目中展示赋码和标签

 src/views/projectEngineering/projectLibrary/component/BasicInfo.vue

@@ -14,7 +14,18 @@
          </el-form-item>
        </el-col>
        <el-col :span="12" style="position: relative">
          <div style="width: 150px; position: absolute;"><img alt="" src="../../../../assets/images/s.png"/></div>
          <div style="width: 100%; height: 100%; position: absolute;">
            <el-form-item class="item" label="赋码" label-width="50px" prop="coding">
              <template slot-scope="scope">
                <!--                <div class="yellow-dot" v-if="scope.row.coding === 'yellow'"></div>-->
                <!--                <div class="green-dot" v-if="scope.row.coding === 'green'"></div>-->
                <!--                <div class="red-dot" v-if="scope.row.coding === 'red'"></div>-->
                <div class="red-dot"></div>
                <tag-list></tag-list>
              </template>
            </el-form-item>
            <!--            <img alt="" src="../../../../assets/images/s.png"/>-->
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
@@ -294,6 +305,7 @@
<script>
// import Upload from '@element-plus/icons-vue/dist/Upload.vue';
import Map from '@/views/components/Map/index.vue';
import TagList from "./TagList.vue";
// import MapMouseEvent  from '@/views/components/Map/types';
// import UploadStandard from '@/components/uploadStandard.vue';
// import { usePlanLibrary } from '@/hooks/detailsInformation';
@@ -309,6 +321,7 @@
    , 'sys_administrative_divisions', 'sys_centralized_management', 'sys_approval_type', 'sys_key_categories', 'sys_annual_plan'],
  components: {
    Map,
    TagList,
    // UploadStandard,
    // RemoteSelect
  },
@@ -574,4 +587,28 @@
    width: 20px;
  }
}

.yellow-dot {
  width: 10px; /* 圆点的宽度 */
  height: 10px; /* 圆点的高度 */
  background-color: yellow; /* 圆点的颜色 */
  border-radius: 50%; /* 使元素变成圆形 */
  display: inline-block; /* 确保元素可以和其他内联元素一起显示 */
}

.red-dot {
  width: 10px; /* 圆点的宽度 */
  height: 10px; /* 圆点的高度 */
  background-color: red; /* 圆点的颜色 */
  border-radius: 50%; /* 使元素变成圆形 */
  display: inline-block; /* 确保元素可以和其他内联元素一起显示 */
}

.green-dot {
  width: 10px; /* 圆点的宽度 */
  height: 10px; /* 圆点的高度 */
  background-color: green; /* 圆点的颜色 */
  border-radius: 50%; /* 使元素变成圆形 */
  display: inline-block; /* 确保元素可以和其他内联元素一起显示 */
}
</style>

 src/views/projectEngineering/projectLibrary/component/TagList.vue

New file
@@ -0,0 +1,81 @@
<template>
  <div>
    <el-button v-if="!inputVisible" class="button-new-tag" size="small" @click="showInput">+ 标签</el-button>
    <el-input
      v-else
      class="input-new-tag"
      v-model="inputValue"
      ref="saveTagInput"
      size="small"
      @keyup.enter.native="handleInputConfirm"
      @blur="handleInputConfirm"
    >
    </el-input>
    <div class="tags-container">
      <el-tag
        v-for="tag in dynamicTags"
        :key="tag"
        closable
        :disable-transitions="false"
        @close="handleClose(tag)">
        {{tag}}
      </el-tag>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dynamicTags: ['重点标记', '发改关注', '年度项目'],
      inputVisible: false,
      inputValue: ''
    };
  },
  methods: {
    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
    },

    showInput() {
      this.inputVisible = true;
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },

    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.dynamicTags.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = '';
    }
  }
}
</script>

<style>
.el-tag + .el-tag {
  margin-left: 10px;

}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}

.tags-container {
  margin-top: 10px; /* 根据需要调整间距 */
}
</style>

 src/views/projectEngineering/projectLibrary/projectDetails.vue

@@ -34,12 +34,12 @@
        v-if="componentName.name == 'BasicInfo'"
        class="save-button"
        type="primary"
        @click="submit(0)"
        @click="saveProject(0)"
        >草稿</el-button
      >
<!--      <el-button class="save-button" type="primary" @click="submit(1)"-->
<!--        >保存</el-button>-->
      <el-button class="save-button" type="primary" @click="saveProject"
      <el-button class="save-button" type="primary" @click="saveProject(1)"
      >保存</el-button>
      <el-button class="reset-button" @click="reset">重置</el-button>
      <!-- <el-button v-else class="cancel-button" @click="cancel">取消</el-button> -->
@@ -144,7 +144,8 @@
    reset() {
      this.$refs.childRef.reset();
    },
    saveProject() {
    saveProject(num) {
      this.projectForm.projectInfoForm.usedStatus = num;
      editProject(this.projectForm).then((res) => {
        this.$message.success("保存成功");
      })

 src/views/projectManage/progress/index.vue

@@ -109,6 +109,11 @@
          }}
        </template>
      </el-table-column>
      <el-table-column label="异常问题" align="center" prop="exception" >
        <template slot-scope="scope">
          {{ scope.row.exception === 0 ? '计划超期' : scope.row.exception === 1 ? '进度超期' : '' }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button