Merge branch 'dev'

zxl

2025-03-21 3bd55592b33a86c8b0dce21a9e8ea6126b9c2d94

 src/views/codingRuler/index.vue

New file
@@ -0,0 +1,485 @@
<template>
  <div class="app-container">
    <div v-loading="loading">
    <div class="slot">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="75px">
        <el-form-item label="项目码类型" prop="projectCodeType">
          <el-select v-model="queryParams.projectCodeType" placeholder="项目码类型" @change="handleQuery">
            <el-option
              v-for="dict in dict.type.coding_type"
              :key="dict.value"
              :value="dict.value"
              :label="dict.label"
            >
            </el-option>
          </el-select>

        </el-form-item>
        <el-form-item label="区间类型" prop="intervalType">
          <el-select v-model="queryParams.intervalType" placeholder="区间类型" @change="handleQuery">
            <el-option
              v-for="dict in dict.type.interval_type"
              :key="dict.value"
              :value="dict.value"
              :label="dict.label"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <div class="right-section">
        <div class="add-btn">
          <el-tooltip content="新增" effect="dark" placement="top">
            <el-button :disabled="!isReserve" circle icon="el-icon-plus" @click="add()" size="small"/>
          </el-tooltip>
        </div>
      </div>
    </div>
      <el-table
        :data="tableData"
        row-key="id"
        border
        @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column

          prop="projectCodeType"
          label="项目码类型"
        >
          <template slot-scope="scope">
            <dict-tag :options="dict.type.coding_type" :value="scope.row.projectCodeType"/>
          </template>
        </el-table-column>
        <el-table-column
          prop="intervalType"
          label="区间类型"
        >
          <template slot-scope="scope">
            <dict-tag :options="dict.type.interval_type" :value="scope.row.intervalType"/>
          </template>
        </el-table-column>
        <el-table-column
          prop="leftSymbol"
          label="左符号"
        >
          <template slot-scope="scope">
            <dict-tag :options="dict.type.sys_coding_operator" :value="scope.row.leftSymbol"/>
          </template>
        </el-table-column>
        <el-table-column
          prop="leftValue"
          label="左值"
        >
        </el-table-column>
        <el-table-column
          prop="rightSymbol"
          label="右符号"
        >
          <template slot-scope="scope">
            <dict-tag :options="dict.type.sys_coding_operator" :value="scope.row.rightSymbol"/>
          </template>
        </el-table-column>
        <el-table-column
          prop="rightValue"
          label="右值"
        >
        </el-table-column>
        <el-table-column
          prop="status"
          label="状态"
        >
          <template slot-scope="scope">
              <el-tag :type="scope.row.status === 0 ? 'info' : 'success'">
                {{scope.row.status === 0 ? "未启用" : "启用"}}
              </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"  min-width="100">
          <template slot-scope="scope">
            <el-button v-if="editShow" size="medium" type="text"
                       @click="changeStatus(scope.row)">
              {{scope.row.status === 0 ? "启用" : "停用"}}
            </el-button>

            <el-button v-if="editShow" size="medium" type="text"
                       @click="editCodingRuler(scope.row)"
                       :disabled="scope.row.status === 1"
            >编辑</el-button>

            <el-button v-if="delShow" size="medium"
                       type="text"
                       @click="deleteCodingRuler(scope.row)"
                       :disabled="scope.row.status === 1"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.currentPage"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
      <el-dialog width="45%" :title="dialogTitle" @close="closeDialog" :visible.sync="open" :show-close="true"  :close-on-click-modal="true"  :destroy-on-close="true">
            <el-form :model="codingRulerForm" :rules="rules" ref="codingRulerForm">
              <el-form-item label="项目码类型" :label-width="formLabelWidth" prop="projectCodeType">
                <el-select v-model="codingRulerForm.projectCodeType" placeholder="项目码类型" @change="changeOption($event)">
                  <el-option
                    v-for="dict in dict.type.coding_type"
                    :key="dict.value"
                    :value="dict.value"
                    :label="dict.label"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="区间类型" :label-width="formLabelWidth" prop="intervalType">
                <el-select v-model="codingRulerForm.intervalType" placeholder="区间类型" @change="changeOption($event)">
                  <el-option
                    v-for="dict in dict.type.interval_type"
                    :key="dict.value"
                    :value="dict.value"
                    :label="dict.label"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="左符号" :label-width="formLabelWidth" prop="leftSymbol" >
                    <el-select v-model="codingRulerForm.leftSymbol" placeholder="选择符号" @change="changeOption($event)">
                      <el-option
                        v-for="dict in leftOption"
                        :key="dict.value"
                        :value="dict.value"
                        :label="dict.label.replace('大于', '>')
                    .replace('小于', '<')
                    .replace('大等于', '>=')
                    .replace('等于', '=')
                    .replace('小于等于', '<=')"
                      >
                      </el-option>
                    </el-select>

                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="左值" :label-width="formLabelWidth" prop="leftValue">
                    <el-input v-model="codingRulerForm.leftValue" autocomplete="off" type="number" :min="0"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
            <el-form :model="singleForm" :rules="rules2" ref="singleForm" v-show="isSingleInterval">
              <el-row>
                <el-col :span="12">
                  <el-form-item label="右符号" :label-width="formLabelWidth" prop="rightSymbol"  >
                    <el-select v-model="singleForm.rightSymbol" placeholder="选择符号" @change="changeOption($event)">
                      <el-option
                        v-for="dict in rightOption"
                        :key="dict.value"
                        :value="dict.value"
                        :label="dict.label.replace('大于', '>')
                    .replace('小于', '<')
                    .replace('大等于', '>=')
                    .replace('等于', '=')
                    .replace('小于等于', '<=')"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="右值" :label-width="formLabelWidth" prop="rightValue">
                    <el-input v-model="singleForm.rightValue" autocomplete="off" type="number" :min="0"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>

            </el-form>

            <div slot="footer" class="dialog-footer">
              <el-button @click="closeDialog">取 消</el-button>
              <el-button type="primary" @click="addOrEditCodingRuler">确 定</el-button>
            </div>
          </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  addCodingRuler,
  changeCodingRulerStatus,
  deleteCodingRulerById,
  editCodingRuler,
  getCodingRulers
} from '@/api/codingRuler/codingRuler.js'

export default {
  dicts: ['sys_coding_operator','coding_type','interval_type'],
  name: "CodingRulerDialog",
  data() {
    return {
      rules2:{
        rightSymbol:[{ required: true, message: '请输入右符号', trigger: 'blur' }],
        rightValue:[{ required: true, message: '请输入右值', trigger: 'blur' }],
      },
      rules:{
        projectCodeType: [{ required: true, message: '请输入项目码类型', trigger: 'blur' }],
        intervalType: [{ required: true, message: '请输入区间类型', trigger: 'blur' }],
        leftSymbol: [{ required: true, message: '请输入左符号', trigger: 'blur' }],
        leftValue: [{ required: true, message: '请输入左值', trigger: 'blur' }],
      },
      // 是否为单区间
      isSingleInterval:false,
      // 弹出框标题
      dialogTitle:"",
      //是否新增条件
      isReserve: true,
      // 能否修改条件
      editShow:true,
      // 能否删除条件
      delShow:true,
      // 总条数
      total:0,
      // 表格内容
      tableData:[],
      // 是否开启搜索条件
      showSearch:true,
      queryParams:{
        intervalType:'',
        currentPage: 1,
        pageSize: 10,
        projectCodeType:'',
      },
      formLabelWidth: '120px',
      // 表单参数
      codingRulerForm:{
        projectCodeType:'',
        intervalType:'',
        leftSymbol:'',
        leftValue:'',

      },
      singleForm:{
        rightSymbol:'',
        rightValue:'',
      },
      // 是否显示弹出层
      open: false,
      // 选中数组
      ids: [],
      loading:false,
    }
  },
  computed:{
    leftOption(){
      if (this.codingRulerForm.intervalType === null || this.codingRulerForm.intervalType === ''){
        return  this.dict.type.sys_coding_operator
      }else {
        if (this.codingRulerForm.intervalType === 'interval'){
          return this.dict.type.sys_coding_operator.filter(item => item.value <= 2);
        }else {
          return  this.dict.type.sys_coding_operator;

        }
      }
    },
    rightOption(){
        return this.dict.type.sys_coding_operator.filter(item => item.value >= 2);
    }
  },
  created(){

  },
  mounted() {
    // 初始化表单数据
    this.getList();
  },
  watch:{
    'codingRulerForm.intervalType'(val){
      if (val && val === 'single_interval'){
        this.isSingleInterval = false;
      }else if (val === 'interval'){
        this.isSingleInterval =true;
      }else {
        this.isSingleInterval =false;
      }
    }
  },
  methods: {
    // 清除验证样式以及单区间右符号的值
    changeOption(e){
      if (e === 'single_interval'){
        this.singleForm.rightValue = null;
        this.singleForm.rightSymbol = null;
      }
    },
    // 获取表格数据
    getList(){
      this.loading = true;
      getCodingRulers(this.queryParams).then(res =>{
        this.tableData = res.data;
        this.total = res.total;
        this.loading = false;
      })

    },
    // 修改
    editCodingRuler(row){
      this.open = true;
      this.dialogTitle = "编辑";
      // 表单赋值
      // 拷贝
      this.codingRulerForm = {...row};
      this.singleForm =  {...row};
    },
    // 删除
    deleteCodingRuler(row){
      this.$modal.confirm('是否删除选中编码规则?').then(function(){
        return deleteCodingRulerById(row.id);
      }).then(() =>{
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    // 新增
    add(){
      this.open = true;
      this.dialogTitle = "新增";
    },
    // 取消
    closeDialog() {
      this.open = false;
      this.clearForm();
    },
    // 清空表单
    clearForm() {
      this.codingRulerForm = {
        id :null,
        projectCodeType:null,
        intervalType:null,
        leftSymbol:null,
        leftValue:null,
      }
      this.singleForm ={
        rightSymbol:null,
        rightValue:null,
      }
      this.resetForm("codingRulerForm");
      this.resetForm("singleForm");
      this.isSingleInterval = false;
    },

    handleSelectionChange(val) {
      this.ids = val.map(item => item.id)
      console.log(ids)
    },
    // 搜索按钮操作
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    // 重置搜索
    resetQuery(){
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 状态切换
    changeStatus(row){
      changeCodingRulerStatus(row.id).then(res =>{
        this.getList();
        this.$message.info(res.msg)
      })
    },
    async addOrEditCodingRuler() {

      // 默认
      let intervalState = false;

      if(this.codingRulerForm.intervalType && this.codingRulerForm.intervalType === "interval"){
        // 区间情况
        intervalState = true;
      }else {
        intervalState = false;
      }
      if (intervalState){
        let need1 = false;
        let need2 = false;
        let warning = false;
         await this.$refs["singleForm"].validate((valid) =>{
          if (valid){
            need1 = true;
          }
        })
          await this.$refs["codingRulerForm"].validate((valid) => {
          if (valid) {
            need2 = true;
            if(this.codingRulerForm.leftValue >= this.singleForm.rightValue){
              warning = true;
            }
          }
        });
         if (warning){
           this.$message.warning("右值应该大于左值")
           return
         }
        if (need1 && need2){
          this.addOrEdit();
        }
      }else {
        this.$refs["codingRulerForm"].validate((valid) => {
          if (valid) {
            this.addOrEdit();
          }
        });
      }
    },
    async addOrEdit(){
      const form = this.codingRulerForm;
      form.rightSymbol = this.singleForm.rightSymbol;
      form.rightValue = this.singleForm.rightValue;
      if (this.dialogTitle === "新增") {
        await addCodingRuler(form).then((res) => {
          this.$message.success(res.msg);
          this.open = false;
          this.getList();
        })
      } else if (this.dialogTitle === "编辑" && this.codingRulerForm.id){
        await editCodingRuler(form).then((res) => {
          this.$message.success(res.msg);
          this.open = false;
          this.getList()
        })
      }
      this.isSingleInterval = false;
    }


  }
}
</script>

<style scoped>
.right-section {
  display: flex;


  .add-btn {
    margin: 0 10px;
  }
}
.slot {
  display: flex;
}
</style>